شرح خاصية box-sizing في CSS او Css3 .

box-sizing هي خاصية تمكننا من الحفاظ على نفس طول وعرض المحدد لعنصر معين في HTML رغم تأثير خاصيات أخرى مثل Padding و border و غيرها

لتوضيح

{
box-sizing: border-box;  /* هذه الحالة تحافظ على حجم الطول والعرض  */
box-sizing: content-box;   /* هذه الحالة لا تحافظ على حجم الطول والعرض الأصلي */
}

 أنصحك بمتابعة الأمثلة كاملة لكي تحصل على فكرة شاملة حول هذه الخاصية

المثال الأول

في هذا المثال سوف نقوم بإنشاء عنصرين من div الأولى سوف نطبق عليها border-box في box-sizing و div الثانية لن نطبق عليها الأمر وسوف نقوم بوضع padding بقيمة مرتفعة لترى الفرق بينهم بالعين المجردة .

<div id="div1"></div>
<div id="div2"></div>

#div1{
    width: 200px;
    height: 80px;
    padding: 50px;
    background-color:#006000;
    box-sizing: border-box;
}
#div2{
    width: 200px;
    height: 80px;
    padding: 50px;
    background-color:#006000;
    box-sizing: content-box; /* اختيارية وقد تكون اجبارية اذا كنت وضعت الخاصية الأولى على كل العناصر */
}

div1

div2

المثال الثاني

في هذا المثال سوف نصنع مشكل ونحله ومن خلال هذا الأمر سوف يتبين لك اهمية خاصية box-sizing وستعلم انها خاصية لا يمكن الإستغناء عنها في برمجة CSS بدون ان اطيل تابع المشكلة وحلها

المشكلة

<section>
  <div id="div1"></div>
  <div id="div2"></div>
</section>

section{
    display: inline;
    width:100%;
    height: auto;

}
#div1{
    background-color: #006000;
    width: 70%;
    height: 20px;
    float: left;
}
#div2{
    background-color: #600000;
    height: 20px;
    width: 30%;
    float: left;
    border: solid 2px;
}

كما نلاحظ لقد أثر الإطار border الذي اضفناه بقيمة 2px فقط على الحجم الأصلي ل div2 مما ادى الى عدم وضعها في نفس سطر الوجود فيه div1 ولهذا في التجربة الثانية من المثال الثاني سوف ترى بنفسك ما سيحصل عند اضافة box-sizing الى div2 .

<section>
  <div id="div1"></div>
  <div id="div2"></div>
</section>

section{
    display: inline;
    width:100%;
    height: auto;

}
#div1{
    background-color: #006000;
    width: 70%;
    height: 20px;
    float: left;
}
#div2{
    background-color: #600000;
    height: 20px;
    width: 30%;
    float: left;
    border: solid 2px;
    box-sizing: border-box;
}

كما ترى لم يحدث تغيير لقيمة الطول والعرض وهذا ما جعل div2 تكون في نفس السطر مع div1 اتمنى ان يكون الشرح واضح وشكرا على القراءة .