خاصیت 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;
}بسیاری از مرورگرها از این خاصیت به طور پیش‌فرض برای برخی از عناصر فرم استفاده می‌کنند، اما نه برای همه. استفاده از این تنظیم برای همه عناصر می‌تواند یک رویکرد ایمن و مناسب باشد.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام