box-sizing در CSS (جعبه بندی)
ویژگی «box-sizing در CSS» تعیین می کند عرض و ارتفاع عنصر چگونه محاسبه شود؛ آیا «پدینگ (Padding)» و «بوردر (Border)» را شامل کند یا نه. با این قانون، اندازه گیری جعبه دقیق تر می شود و نتایج قابل پیش بینی تری خواهید داشت.
box-sizing در CSS چیست؟
به صورت پیش فرض، اندازه واقعی عنصر برابر است با: width + padding + border برای عرض و height + padding + border برای ارتفاع. بنابراین با تعیین width/height، عنصر ممکن است بزرگ تر از مقدار مشخص شده دیده شود.
نمونه بدون box-sizing
.div1 { width: 300px; height: 100px; border: 1px solid blue; } .div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; }در کد بالا، هر دو عنصر مقدار width/height یکسان دارند؛ اما به دلیل پدینگ، اندازه نهایی متفاوت است.
راه حل: استفاده از 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; }نکته: بسیاری از توسعه دهندگان ترجیح می دهند این رفتار برای همه عناصر فعال باشد.
اعمال box-sizing روی همه عناصر
* { box-sizing: border-box; }این کار اندازه گذاری را یکنواخت می کند و کنترل چیدمان را ساده تر می سازد.
مطالعه بیشتر و لینک های مفید
جزئیات بیشتر درباره «box-sizing در CSS» را می توانید در منابع زیر دنبال کنید. همچنین موضوعات مرتبط در مستندات داخلی را ببینید.
- MDN: box-sizing
- MDN: Box Model Basics
- قانون @property در CSS — تعریف ویژگی سفارشی
- کوئری های رسانه ای در CSS — واکنش گرایی بهتر
برای یک شروع سریع، از box-sizing در CSS در سطح کل صفحه استفاده کنید و سپس به صورت موردی آن را تغییر دهید.