ویژگی box-sizing CSS

تعریف و استفاده

ویژگی box-sizing به شما اجازه می‌دهد تا به صورت خاص عنصری را که با آن منطقه‌ای همخوانی دارد، تعریف کنید.

مثلاً اگر می‌خواهید دو قاب با لبه‌ها به صورت موازی قرار بگیرند، می‌توانید box-sizing را به "border-box" تنظیم کنید. این کار باعث می‌شود مرورگر یک قاب با عرض و ارتفاع مشخص نشان دهد و لبه‌ها و فضاهای داخلی در داخل قاب قرار گیرند.

لطفاً به: مراجعه کنید

آموزش CSS3:رابط کاربری CSS3

دستورالعمل HTML DOM:ویژگی boxSizing

مثال

این دو قاب با لبه‌ها قرار می‌گیرند:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

آموزش عملی

در پایین صفحه مثال‌های بیشتری وجود دارد.

آموزش CSS:

box-sizing: content-box|border-box|inherit;

مقدار ویژگی

مقدار توضیح
content-box

این رفتار عرض و ارتفاع توسط CSS2.1 تعیین شده است.

عرض و ارتفاع به ترتیب به قاب محتوای عنصر اعمال می‌شوند.

فضاهای داخلی و لبه‌های عنصر خارج از عرض و ارتفاع رسم می‌شوند.
border-box

عرض و ارتفاع تعیین شده برای عنصر، قاب لبه‌دار عنصر را تعیین می‌کند.

این به معنای آن است که هرگونه فضای داخلی و لبه‌ای که برای عنصر تعیین شده است، در عرض و ارتفاع تنظیم شده رسم می‌شود.

شما می‌توانید عرض و ارتفاع محتوا را با کاستن پادریها و فضاهای داخلی از عرض و ارتفاع تنظیم شده به دست آورید.
inherit این ویژگی‌ای است که باید مقدار آن از عنصر والد برای ویژگی box-sizing ارث ببرد.

جزئیات فنی

مقدار پیش‌فرض: content-box
ارث: خیر
نسخه: CSS3
آموزش زبان JavaScript: object.style.boxSizing="border-box"

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

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی هستند که این ویژگی را به طور کامل پشتیبانی می‌کنند.

اعداد به صورت -webkit- یا -moz- نشان‌دهنده نسخه اولیه با استفاده از پیشوند هستند.

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 8.0 29.0
2.0 -moz-		 5.1
3.2 -webkit-		 9.5