خصوصیت box-sizing

مثال

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

		div

		{

		box-sizing:border-box;

		-moz-box-sizing:border-box; /* Firefox */

		width:50%;

		float:left;

		}

خودتان امتحان کنید »

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

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

لینک های اصلی

مرجع CSS

خصوصیت box-sizing

مثال

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

تعریف و کاربرد

نحوه استفاده

لِکُلِّ شَیْ‏ءٍ زَکَاةٌ وَ زَکَاةُ الْعَقْلِ احْتِمَالُ الْجُهَّال‏

برای هر چیزی زکاتیست و زکات عقل تحمّل نادانان است.