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

بدون ویژگی box-sizing

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

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

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

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

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

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

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

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

با ویژگی box-sizing

ویژگی box-sizing  ما را قادر می سازد تا حاشیه وسط را در عرض و ارتفاع کلی عنصر قرار دهیم.

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

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

.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-size استفاده می کنند: ;box-sizing: border-box برای بسیاری از عناصر فرم کاربرد دارد(اما نه همه - به همین دلیل است که ورودی ها و زمینه های متن با عرض متفاوت متفاوتند: 100٪؛).

اعمال این به همه عناصر امن و عاقلانه است:

* {
    box-sizing: border-box;
}