Box Model
میتوان تمام المان های HTML را شبیه به box (جعبه) دید. در سی اس اس، اصطلاح "box model" برای طراحی و لی اوت استفاده میشود.
در سی اس اس، box model به باکسی گفته میشود که دور هر المان HTML قرار دارد اطلاق میشود. این باکس شامل: margin ها، borderها، paddingها، و و محتوای واقعی میباشد. توصیر زیر مفهوم box model را به تصویر میکشد.
توضیح هر بخش از box model:
- Content - محتوای باکس، که در آن متن و تصویر قرار میگیرد
- Padding - فضای خالی و transparent در کنار محتوا
- Border - بوردر یا مرزی که دور content و padding قرار میگیرد
- Border - فضا و منطقه ای transparent و بیرون از بوردر
box model به ما این اجازه را میدهد که بوردر دور المان ایجاد کنیم و فضایی بین المان ها بوجود بیاوریم.
مثال
div { width: 300px; border: 25px solid cornflowerblue; padding: 25px; margin: 25px; }
عرض و ارتفاع المان
برای تنظیم عرض و ارتفاع که در تمام مرورگرها یکسان نشان دهد لازم است شما box model را به درستی بشناسید.
عرض نهایی یک المان باید به این صورت محاسبه شود:
Total element width = width + left padding + right padding + left border + right border + left margin + right margin
ارتفاع نهایی یک المان باید به این صورت محاسبه شود:
Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
مثال
در این مثال ما میخواهیم عرض نهایی المان div 350px باشد:
div { width: 320px; padding: 10px; border: 5px solid gray; margin: 0; }
از روش زیر محاسبه میکنیم:
- 320px (width)
- + 20px (left + right padding)
- + 10px (left + right border)
- + 10px (left + right margin)
- = 350px