Box Sizing
Box Sizing در CSS
ویژگی box-sizing
به ما اجازه میدهد که در عرض و ارتفاع کل یک عنصر padding و کادر نیز داشته باشیم.[۱]
بدون ویژگی box-sizing در CSS
به صورت پیشفرض، عرض و ارتفاع یک عنصر به صورت زیر محاسبه میشود:
- width + padding + border = عرض واقعی یک عنصر
- height + padding + border = ارتفاع واقعی یک عنصر
این بدان معناست: زمانی که شما عرض/ارتفاع یک عنصر را تنظیم میکنید، عنصر اغلب بزرگتر از آنچه تنظیم شده ظاهر میشود (زیرا کادر و padding عنصر به عرض/ارتفاع مشخص شده عنصر اضافه میشود).
تصویر زیر دو عنصر <div> با عرض و ارتفاع مشخص را نشان میدهد:
این div کوچکتر است (عرض ۳۰۰ پیکسل است و ارتفاع نیز ۱۰۰ پیکسل است).
این Div بزرگتر است (عرض این عنصر نیز ۳۰۰ پیکسل و ارتفاع آن نیز ۱۰۰ پیکسل است).
در نتیجه دو عنصر <div> با اندازههای متفاوت ظاهر شدند (زیرا padding عنصر div2 مشخص شدهاست):
ویژگی box-sizing
این مشکل را رفع کردهاست.
با ویژگی box-sizing در CSS
ویژگی box-sizing
به ما اجازه میدهد که padding و کادر را در مجموع اندازهٔ عرض و ارتفاع داشته باشیم.
اگر شما box-sizing: border-box;
را بر روی عنصر تنظیم کنید، padding و کادر درون عرض و ارتفاع قرار میگیرند:
هر دو div هماکنون اندازه یکسانی دارند!
در اینجا مثالی مشابه مثال بالا وجود دارد، با اضافه شدن box-sizing: border-box;
به هر دو عنصر <div>:
از آنجایی که نتیجه استفاده از box-sizing: border-box;
خیلی بهتر است، بسیاری از توسعه دهندگان میخواهند تمامی عناصر روی صفحات آنان به این صورت کار کنند.
کد زیر اطمینان حاصل میکند که تمامی عناصر به روش بصری تری اندازه دهی می شوند. بسیاری از مرورگرها در حال حاضر از
box-sizing: border-box;
برای بسیاری از عناصر فرم استفاده میکنند (اما نه همه آنها - که این دلیل نمایش متفاوت فیلدهای ورودی (inputها) و text areaها با عرض ۱۰۰٪ است).
اعمال این دستور بر روی تمامی عناصر کار امن و عاقلانه ای است:
ویژگی Box Sizing در CSS
ویژگی | توضیحات |
---|---|
box-sizing | نحوه محاسبه عرض و ارتفاع یک عنصر را تعریف میکند: ایا میبایست padding و borderها را در بر گیرند یا خیر |
منابع آموزشی