Box Sizing CSS

Box Sizing CSS

CSS box-sizing این ویژگی اجازه می‌دهد تا عرض و ارتفاع کل عنصر شامل حاشیه داخلی (پرکننده) و لبه‌ها باشد.

اگر ویژگی CSS box-sizing مشخص نشده باشد

به صورت پیش‌فرض، عرض و ارتفاع عنصر به این صورت محاسبه می‌شود:

  • width + padding + border = عرض واقعی عنصر
  • height + padding + border = ارتفاع واقعی عنصر

این به این معنی است: وقتی شما عرض/ارتفاع عنصر را تنظیم می‌کنید، معمولاً عنصر بزرگتر از آنچه که تنظیم کرده‌اید به نظر می‌رسد (چون لبه‌ها و حاشیه داخلی به عرض/ارتفاع مشخص شده اضافه شده‌اند).

در تصویر زیر دو عنصر <div> با عرض و ارتفاع مشخص شده یکسان نشان داده شده است:

این div کوچکتر است
(عرض 300px و ارتفاع 100px).
این div بزرگتر است
(عرض نیز 300px و ارتفاع 100px است).

دو عنصر <div> بالا در نتیجه نهایی اندازه‌های مختلفی دارند (چون div2 حاشیه داخلی دارد):

مثال

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue; 
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

آزمایش کنید

box-sizing این ویژگی مشکل را حل می‌کند.

اگر از ویژگی CSS box-sizing استفاده شود

box-sizing این ویژگی اجازه می‌دهد تا عرض و ارتفاع کل عنصر شامل حاشیه داخلی و لبه‌ها باشد.

اگر روی عنصر تنظیم شده باشد box-sizing: border-box;، بنابراین عرض و ارتفاع شامل حاشیه داخلی و لبه‌ها خواهد بود:

حالا دو div اندازه یکسانی دارند!
Hooray!

این مثال مانند مثال قبلی است، دو عنصر <div> هر دو تنظیم شده‌اند box-sizing: border-box;:

مثال

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

آزمایش کنید

بخاطر استفاده از box-sizing: border-box; به طور چشمگیری خوب است، بنابراین بسیاری از توسعه‌دهندگان می‌خواهند که همه عناصر در صفحه به این روش کار کنند.

کد زیر می‌تواند اطمینان دهد که همه عناصر به این روش واضح‌تر تنظیم شوند. بسیاری از مرورگرها از این روش برای بسیاری از عناصر فرم استفاده می‌کنند box-sizing: border-box;اما نه همه - این دلیل است که input و textarea در width: 100%; به نظر می‌رسند که متفاوت هستند).

این کار را برای همه عناصر اعمال کردن امن و هوشمندانه است:

مثال

* {
  box-sizing: border-box;
}

آزمایش کنید

ویژگی Box Sizing CSS

ویژگی توضیحات
box-sizing روش محاسبه عرض و ارتفاع عناصر: آیا باید پدینگ (padding) و حاشیه (border) را شامل شوند یا خیر.