كما قلنا سابقا لكي تحصل علي عرض الصندوق كما تريد لا بد ان تأخذ فى الحسبان قيمة سمك الحد border والحشو padding . لكن مع  خاصية Box sizing CSS  الجديدة فى CSS لن تتعب نفسك فى عمليات حساب وطرح كل ما عليك هو ان تقرر عرض width الصندوق وكلا من قيم الحد والحشو سوف يتم عملها الي الداخل اي لن تزيد من عرض الصندوق.
أن خاصية Box sizing CSS  حلت مشكلة زيادة عرض الصندوق عندما أضافة او تغيير قيم الحد والحشو. التالي نفس المثال فى الدرس السابق ولكن باستخدام خاصية box-sizing :

.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
شرح-خاصية-box-sizing-css
شرح خاصية Box sizing CSS

 

يبدو ان الوضع الآن اصبح مريحاً، هناك بعض المصممين يفضلو ان تكون كل العناصر علي الصفحة لها ميزة box-sizing وذلك بأضافة كود CSS التالي الى صفحاتهم.

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

هذا يضمن ان كل العناصر سوف يتم ضبط حجمها بطريقة اكثر عملية ومريحة من عمليات الطرح والجمع لقيم الحدود والحشو.

على كلا  تعتبر خاصية Box sizing CSS  جميلة وحديثة طبعا، لذا يتوجب  عليك  اضافة البادئات : -webkit- و -moz-  فى الوقت الحالي الي  كود box-sizing كما هو موضح  بالمثال. تقوم  البادئات بتفعيل  المميزات تحت الاختبار فى المتصفحات.  أظن جاء فى خاطرك واحد منهم الأ وهو IE9+ .

رابط مختصر : https://www.aqwce.com/HDXeW