خصوصیت box-sizing
مثال
چهار <div> با اندازه یکسان و خروجی های متفاوت:
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
خودتان امتحان کنید »
پشتیبانی مرورگرها
![Safari Safari](http://www.beyamooz.com/images/html/compatible_safari.gif)
مرورگرهای Internet Explorer، Opera، Chrome و Safari، خصوصیت box-sizing را پشتیبانی می کنند.
مرورگر Firefox از خاصیت جایگزین moz-box-sizing- پشتیبانی می کند.
تعریف و کاربرد
با استفاده از خصوصیت box_sizing می توانید عناصر را در یک ناحیه fit کنید.
در واقع با استفاده از خصوصیت های Width و Height تنها اندازه محتوا (Content) تعیین می شود و برای محاسبه اندازه واقعی Box، اندازه (Padding و Border و Margin) نیز باید به این اندازه اضافه شوند.
برای مثال، اگر بخواهید دو box که دارای حاشیه هستند کنار هم قرار گیرند، می توانید خاصیت box-sizing را "border-box" تنظیم کنید. این کار مرورگر را وادار می کند، تا box را با طول مشخص شده render کند و border , padding را داخل box قرار می دهد.
مقدار پیشفرض |
content-box |
ارث بری |
خیر |
نسخه |
CSS3 |
JavaScript ساختار |
object.style.boxSizing="border-box" |
نحوه استفاده
box-sizing: content-box|border-box|inherit:
مقدار |
توضیحات |
content-box |
اندازه عنصر فقط شامل Content می شود و Padding و Border و Margin محاسبه نمی شود. (مقدار پیشفرض) |
border-box |
اندازه عنصر شامل Content و Padding و Border می شود اما Margin محاسبه نمی شود. (این مدل در IE8 و نسخه های قبلی آن اعمال می شود) |
inherit |
تعيين مي کند که بايد از والدش، ارث بري داشته باشد.
|