تاریخ انتشار:۱۴:۱ ۱۳۹۹/۵/۲۵

box model در CSS به باکسی گفته میشود که هر عنصر HTML  در آن قرار میگیرد که شامل margin ها، border ها ، padding و محتوای خود عنصر است.

در تصویر نشان داده شده در زیر مفهوم box model تشریح شده است :

 

توضیح قسمت های مختلف :

• Content - محتوای box ، جایی که متون و تصاویر قرار میگیرند
• Padding - فضایی که اطراف محتوای یک عنصر قرار میگیرد. 
• Border - خط دوری که بین padding و content قرار میگیرد
• Margin - فضایی که بیرون از border اطراف عنصر HTML قرار میگیرد
   
  

box model به ما اجازه میدهد که اطراف عنصر border اضافه کنیم و فضا بین عناصر مختلف ایجاد کنیم :

 }  div
 ; width : 300px
 ; border : 25px solid green
 ; padding : 25px
 ; margin : 25px
 }

---

عرض و ارتفاع یک عنصر

به منظور مقداردهی صحیح عرض و ارتفاع یک عنصر درتمام مرورگر ها، نیاز است بدانید که box model چطور کار میکند.

نکته مهم : وقتی صفات width و height را برای یک عنصر با استفاده از CSS مقدار دهی میکنید، شما فقط عرض و ارتفاع را برای قسمت content تنظیم میکنید. برای محاسبه ی اندازه ی کلی یک عنصر ، باید مقادیر margin ، border و padding را به مقدار مورد نظر اضافه کنید.

 

فرض کنید که میخواهید یک عنصر div را طوری استایل دهی کنید که مجموعا عرضی برابر 350 پیکسل داشته باشد :

 }  div
 ; width : 320px
 ; padding : 10px
 ; border : 5px solid gray
 ; margin : 0
 {

 محاسبه ی عرض به صورت زیر است :

320 پیکسل (عرض)
+ 20 پیکسل (padding سمت راست + padding سمت چپ)
+ 10 پیکسل (border سمت راست + border سمت چپ) 
+ 0 پیکسل   (margin سمت راست + margin سمت چپ)
= 350 پیکسل

مجموع عرض یک عنصر به شکل زیر محاسبه میشود :

مجموع عرض یک عنصر  = 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

نکته : اینترنت اکسپلورر 8 و نسخه های قدیمی تر آن padding و border را جز عرض یک عنصر به حساب می آورند. برای حل این مشکل تگ نوع سند <DOCTYPE html!> را به صفحه ی HTML خود اضافه کنید.

منبع:learnsource