CSS Box Sizing

CSS Box Sizing چیست؟

در CSS، هر عنصر (عنصر HTML) به صورت یک **کادر** (box) دیده می‌شود که از چند بخش تشکیل شده:

*Content (محتوا)
* Padding (حاشیه داخلی)
* Border (حاشیه دور)
* Margin (حاشیه بیرونی)

—

 مسئله Box Sizing

وقتی شما به یک عنصر عرض (`width`) و ارتفاع (`height`) می‌دهید، به صورت پیش‌فرض فقط اندازه **محتوا** را مشخص می‌کنید و **padding** و **border** به آن اضافه می‌شوند و در نتیجه اندازه کلی کادر بزرگ‌تر از مقدار تعیین شده می‌شود.

—

 ویژگی box-sizing

با استفاده از `box-sizing` می‌توانید رفتار محاسبه اندازه کادر را تغییر دهید.

—

 مقدارهای مهم:

* `content-box` (پیش‌فرض)

عرض و ارتفاع فقط مربوط به **محتوا**ست. `padding` و `border` به آن اضافه می‌شوند.

* `border-box`

عرض و ارتفاع شامل **محتوا + padding + border** است.

—

مثال

“`css
/* پیش‌فرض */
div {
width: 200px;
padding: 20px;
border: 5px solid black;
box-sizing: content-box;
background-color: lightblue;
}

/* با box-sizing: border-box */
div.box-border {
width: 200px;
padding: 20px;
border: 5px solid black;
box-sizing: border-box;
background-color: lightgreen;
}
“`

—

تفاوت در اندازه نهایی:

* در حالت `content-box`، عرض نهایی = 200px (محتوا) + 40px (padding دو طرف) + 10px (border دو طرف) = 250px
* در حالت `border-box`، عرض نهایی کل کادر برابر 200px است و padding و border داخل این 200px حساب می‌شود.

—

 استفاده رایج

معمولا برای راحتی کار و جلوگیری از مشکلات طراحی، در CSS مدرن این کد را در ابتدای فایل قرار می‌دهند:

“`css
*,
*::before,
*::after {
box-sizing: border-box;
}
“`

این باعث می‌شود همه عناصر به صورت `border-box` محاسبه شوند و اندازه‌ها ساده‌تر مدیریت شود.