حجم الصندوق- Box Sizing

المفهوم الأساسي:

يتحكم مصطلح "Box Sizing" في كيفية حساب عرض وارتفاع العنصر، مع تضمين الحشوات والحدود.

أنواع Box Sizing:

• content-box: يتم حساب العرض والارتفاع بناءً على المحتوى فقط، دون تضمين الحشوات والحدود.
• border-box: يتم حساب العرض والارتفاع بناءً على المحتوى والحشوات والحدود.

الخطوات العملية:

• افتح ملف CSS الخاص بك.
• أضف الخاصية التالية إلى العنصر الذي تريد التحكم في حجم صندوقه:

box-sizing: content-box; // أو border-box

مثال توضيحي:

للتحكم في كيفية تضمين الحشوة والحدود في العرض الكلي للعنصر:

<div style="width: 200px; padding: 10px; border: 2px solid black;">
  محتوى العنصر
</div>

مع content-box:

div {
  box-sizing: content-box;
}

سيكون العرض الإجمالي 200 بكسل (العرض + الحشوة).

مع border-box:

div {
  box-sizing: border-box;
}

سيكون العرض الإجمالي 224 بكسل (العرض + الحشوة + الحد).