Hausa girmace box-sizing

التعريف والاستخدام

تسمح خاصية box-sizing لك بتحديد كيفية تعريف العنصر الخاص بك لملء منطقة معينة.

على سبيل المثال، إذا كنت بحاجة إلى وضع صندوقين بجوار بعضهما البعض، يمكنك تعيين box-sizing إلى "border-box". هذا يجعل المتصفح يظهر الصندوق مع العرض والارتفاع المحددين ويضيف الهوامش والدوائر إلى الصندوق.

انظر أيضًا:

دليل CSS3CSS3 Ƙa'adanci Ƙarancin

دليل 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