مدل جعبه ای در css به این علت مطرح شده است که تمامی المان های HTML می توانند مانند یک box در نظر گرفته شوند. واژه ” box model ” هنگامی به کار می رود که در مورد design و layout صحبت می کنیم.
box model اساسا فضایی است که اطراف المان را احاطه کرده است که شامل محتوای اصلی، margin، padding و border می شود.
تصویر زیر به خوبی box model را نشان می دهد:
که توضیحات بخش های مختلف مدل جعبه ای در css به شرح زیر است:
- content: محتوای المان می باشد که متن و تصویر، جزیی از آن است.
- padding: فضای اطراف content را می گویند که به صورت transparent می باشد و نمی توان به آن رنگ اختصاص داد.
- border: فضای اطراف content و padding را می گویند.
- margin: فضای بیرون از border را می گویند که به صورت transparent است.
box model این امکان را به ما می دهد که اطراف المان border ایجاد کنیم، همچنین بین المان های مختلف فاصله بدهیم.
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
عرض و ارتفاع مدل جعبه ای در css
برای این که بتوانید به درستی عرض و ارتفاع المان را در مرورگر محاسبه کنید، ابتدا نیاز است که بدانید عملکرد یک مدل جعبه ای در css به چه صورت است.
نکته: هنگامی که width و height را در css تعیین می کنید، در واقع عرض و ارتفاع المان محتوا (content area) را مقدار دهی کرده اید.
برای محاسبه اندازه کلی المان، می بایست مقدار margin، padding و border را نیز اضاف کنید.
فرض کنید می خواهیم یک المان div با عرض کلی برابر با ۳۵۰px داشته باشیم:
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
طبق تعریف مدل جعبه ای در css ، محاسبه مقدار آن، به صورت زیر است:
۳۲۰px (width) + ۲۰px (left + right padding) + ۱۰px (left + right border) + ۰px (left + right margin) = ۳۵۰px
مقدار عرض کلی آن، به صورت زیر محاسبه می شود:
width + left padding + right padding + left border + right border + left margin + right margin
و همچنین مقدار ارتفاع کلی آن به صورت زیر محاسبه می شود:
height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
برگرفته از وب سایت w3schools
دیدگاه بگذارید