CSS – سایزبندی کادر (Box Sizing)

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

بدون استفاده از خاصیت box-sizing

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

  • عرض واقعی = عرض + پدینگ + حاشیه
  • ارتفاع واقعی = ارتفاع + پدینگ + حاشیه

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

مثال: تفاوت دو عنصر div با عرض و ارتفاع یکسان

در این مثال، دو عنصر div با عرض و ارتفاع مشخص شده داریم، اما به دلیل استفاده از پدینگ در یکی از آن‌ها، اندازه نهایی آن‌ها متفاوت است:

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
}

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

در نتیجه:

  • div1 دقیقاً 300px عرض و 100px ارتفاع دارد.
  • div2 به دلیل داشتن پدینگ، بزرگ‌تر به نظر می‌رسد.

حل این مشکل با خاصیت box-sizing

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

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

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

در مثال زیر، هر دو عنصر با 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;
}

حالا هر دو عنصر div1 و div2 با اندازه یکسان (300px در 100px) نمایش داده می‌شوند، حتی با وجود پدینگ در div2.

استفاده از box-sizing: border-box برای همه عناصر

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

کد زیر این خاصیت را به همه عناصر صفحه اعمال می‌کند:

* {
  box-sizing: border-box;
}

بسیاری از مرورگرها از این خاصیت به طور پیش‌فرض برای برخی از عناصر فرم استفاده می‌کنند، اما نه برای همه. استفاده از این تنظیم برای همه عناصر می‌تواند یک رویکرد ایمن و مناسب باشد.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - رویدادها (Events)

JavaScript – رویدادها (Events)

رویدادهای HTML رویدادها در HTML، “اتفاقاتی” هستند که برای عناصر HTML رخ می‌دهند. این اتفاقات می‌توانند ناشی از کار...

بیشتر بخوانید
JavaScript - سازنده‌های شیء (Object Constructors)

JavaScript – سازنده‌های شیء (Object Constructors)

ساخت آبجکت با تابع سازنده (Object Constructor Function) برای ساخت چندین آبجکت مشابه، از تابع سازنده استفاده می‌شود. این...

بیشتر بخوانید
JavaScript - نمایش شیء (Object Display)

JavaScript – نمایش شیء (Object Display)

نحوه نمایش آبجکت‌ها در جاوااسکریپت هنگام نمایش یک آبجکت جاوااسکریپت به صورت مستقیم، خروجی معمولاً به شکل [object Object]...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.