Box Sizing في CSS

Box Sizing في CSS

CSS box-sizing الخاصية تسمح لنا بضم الهوامش الداخلية (الملء) والحدود في عرض العنصر الكلي والارتفاع.

إذا لم يتم تحديد خاصية CSS box-sizing

بالتأكيد، يتم حساب عرض العنصر والارتفاع بهذه الطريقة:

  • العرض + الهوامش الداخلية + الحدود = العرض الفعلي للعنصر
  • الارتفاع + الهوامش الداخلية + الحدود = الارتفاع الفعلي للعنصر

هذا يعني: عندما تقوم بتعيين عرض/ارتفاع العنصر، العنصر عادةً يبدو أكبر مما قمت بتعيينه (بسبب أن الهوامش والحدود قد تم إضافتها إلى العرض/الارتفاع المحدد للعنصر).

الشكل التالي يظهر عنصرين <div> لهما نفس العرض والارتفاع المحدد:

هذا div أصغر
العرض 300px، الارتفاع 100px).
هذا div أكبر
العرض أيضًا 300px، الارتفاع 100px).

العناصر <div> الثلاثة في النتيجة النهائية تظهر بأحجام مختلفة (بسبب أن div2 قد تم تحديد الهوامش الداخلية):

مثال

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue; 
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

جربها بنفسك

box-sizing الخاصية حل هذه المشكلة.

إذا استخدمت خاصية CSS box-sizing

box-sizing الخاصية تسمح لنا بضم الهوامش الداخلية والحدود في عرض العنصر الكلي والارتفاع.

إذا تم تعيين الخاصية على العنصر box-sizing: border-box;، فإن العرض والارتفاع سينتويها الهوامش الداخلية والحدود:

الآن حجم كلا العناصر div متساوي!
هوراى!

هذا المثال مشابه للسابق، كلا العناصر <div> قد تم تعيينها box-sizing: border-box;：

مثال

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}
.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

جربها بنفسك

بسبب الاستخدام box-sizing: border-box; بشكل جيد، والكثير من المطورين يأملون أن يعمل جميع العناصر على الصفحة بهذه الطريقة.

الكود التالي يمكن أن يضمن تعديل حجم جميع العناصر بهذه الطريقة المباشرة. العديد من المتصفحات قد بدأت في استخدام هذا التأثير على العديد من عناصر النماذج box-sizing: border-box;ولكن ليس الجميع - هذا هو السبب في أن input و textarea يبدوان مختلفين عند width: 100%;

تطبيق ذلك على جميع العناصر أمر آمن ومثالي:

مثال

* {
  box-sizing: border-box;
}

جربها بنفسك

خصائص Box Sizing في CSS

خصائص وصف
box-sizing تحديد طريقة حساب عرض العنصر وارتفاعه: هل يجب أن يشمل الهوامش الداخلية (padding) والهوامش الخارجية (border)؟