سبد (0)

خصوصیت box-sizing

مثال (خصوصیت box-sizing)

چهار <div> با اندازه یکسان و خروجی های متفاوت:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
خودتان امتحان کنید »

پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

مرورگرهای 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  تعیین می کند که باید از والدش، ارث بری داشته باشد.

بیاموزهای مرتبط

CSS3 User Interface (بیاموز CSS3)

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان