تفاوت box-sizing content-box و border-box در CSS

در CSS، هر عنصر به صورت یک جعبه (box) نمایش داده می‌شود که از چند بخش اصلی تشکیل شده است: محتوا (content)، حاشیه (padding)، حاشیه دور (border) و فاصله بیرونی (margin). ویژگی box-sizing تعیین می‌کند که چگونه عرض و ارتفاع این جعبه محاسبه می‌شود. دو مقدار اصلی برای این ویژگی وجود دارد: content-box و border-box.

مفهوم box-sizing: content-box

این مقدار پیش‌فرض در CSS است. در این حالت، عرض و ارتفاع عنصر فقط شامل محتوای آن می‌شود و padding و border به آن اضافه می‌گردند. به عبارت دیگر:

اگر عرض عنصر را 200px و padding را 20px و border را 5px تعیین کنید، عرض کل عنصر 250px خواهد شد (200 + 20 + 20 + 5 + 5).
این روش می‌تواند باعث مشکلاتی در طراحی‌های ریسپانسیو شود زیرا محاسبات دستی بیشتری نیاز دارد.

مفهوم box-sizing: border-box

در این حالت، عرض و ارتفاع عنصر شامل محتوا، padding و border می‌شود. این بدان معناست که:

اگر عرض عنصر را 200px تعیین کنید، این 200px شامل محتوا، padding و border خواهد بود.
این روش محاسبه را ساده‌تر می‌کند و برای طراحی‌های ریسپانسیو بسیار کاربردی است.

کاربردهای عملی

در پروژه‌های واقعی، معمولاً از border-box استفاده می‌شود زیرا:

محاسبات ریاضی ساده‌تر می‌شود
طراحی‌های ریسپانسیو قابل پیش‌بینی‌تر می‌شوند
نیاز به تنظیمات دستی کمتری دارد

نمونه کدها

مثال ۱: استفاده از content-box (پیش‌فرض)

.box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

مثال ۲: استفاده از border-box

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
}

مثال ۳: اعمال جهانی border-box

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

خلاصه درس

content-box مقدار پیش‌فرض است و فقط محتوا را در محاسبات عرض/ارتفاع لحاظ می‌کند
border-box شامل محتوا، padding و border در محاسبات می‌شود
استفاده از border-box به طور کلی توصیه می‌شود
می‌توانید با روش مثال ۳، border-box را به صورت جهانی اعمال کنید

توسعه دهندگان

نیما جاهد