اندازه جعبه (Box Sizing)
«اندازه جعبه (Box Sizing)» مشخص می کند عرض و ارتفاع چطور حساب شوند. یعنی آیا «حاشیه داخلی (Padding)» و «خط دور (Border)» داخلِ محاسبه بیایند یا نه. با این ویژگی، اندازه ها دقیق و قابل پیش بینی می شوند.
اندازه جعبه چیست؟
به صورت پیش فرض، اندازه واقعی یک عنصر این گونه است: عرض واقعی = عرض + پدینگ + بردر. بنابراین عنصر بزرگ تر از مقدار تنظیم شده دیده می شود.
مثال: حالت پیش فرض بدون box-sizing
هر دو div عرض و ارتفاع یکسان دارند؛ اما پدینگ، اندازه را بزرگ تر می کند.
.div1 {\n width: 300px;\n height: 100px;\n border: 1px solid blue;\n}\n\n.div2 {\n width: 300px;\n height: 100px;\n padding: 50px;\n border: 1px solid red;\n}\nراه حل: box-sizing: border-box
با box-sizing: border-box; پدینگ و بردر داخلِ عرض و ارتفاع حساب می شوند. بنابراین اندازه دقیق می ماند.
.div1 {\n width: 300px;\n height: 100px;\n border: 1px solid blue;\n box-sizing: border-box;\n}\n\n.div2 {\n width: 300px;\n height: 100px;\n padding: 50px;\n border: 1px solid red;\n box-sizing: border-box;\n}\nقانون سراسری پیشنهادی
برای راحتی، معمولاً همه عناصر را border-box می کنیم تا چیدمان ثابت تر شود.
* {\n box-sizing: border-box;\n}\nنکته: بسیاری از ورودی ها در مرورگرها از قبل border-box هستند؛ اما یکسان سازی سراسری، ظاهر را هماهنگ می کند.
گام های عملی
- قانون سراسری
* { box-sizing: border-box; }را اضافه کن. - سپس اندازه ها را با خیال راحت تنظیم کن.
- در صورت نیاز، برای عناصر خاص مقدار دیگری بگذار.
جمع بندی سریع
- اندازه جعبه محاسبه واقعی را تعیین می کند.
border-boxپدینگ و بردر را داخل حساب می آورد.- قانون سراسری، چیدمان را باثبات می کند.
- اندازه ها دقیق و قابل پیش بینی می شوند.
مباحث مرتبط: ویژگی @property برای تعریف متغیرهای امن، و طراحی واکنش گرا برای سازگاری اندازه ها.