خصائص 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