CSS/box-sizing

الخاصية box-sizing في CSS تُستخدم لتعديل النموذج الصندوقي الافتراضي في CSS (أي CSS box model) المستخدم لحساب عرض وارتفاع العناصر.

/* الكلمات المحجوزة */
box-sizing: content-box;
box-sizing: border-box;

/* القيم العامة */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;

يُطبَّق العرض والارتفاع -افتراضيًا- على صندوق المحتوى (content box) التابع للعنصر، وإذا كان للعنصر إطار (border) أو حاشية (padding) فستُضاف إلى العرض والارتفاع لتُشكِّل أبعاد العنصر المعروضة على الشاشة، وهذا يعني أنَّك عندما تضبط العرض والارتفاع فعليك أن تضع بالحسبان قيمة الحاشية والإطار إن أضفتهما، وهذا صعب خصوصًا عندما يكون تصميم صفحتك متجاوبًا (responsive).

يمكن أن تُستعمَل الخاصية box-sizing لتعديل هذا السلوك:

• القيمة content-box هي القيمة الافتراضية التي تعطيك السلوك الافتراضي المشروح أعلاه. فمثلًا لو ضبطنا عرض أحد العناصر إلى 100 بكسل فسيكون عرض صندوق المحتوى مساويًا إلى 100 بكسل ثم سيُضاف إليه عرض الإطار والحاشية ليُشكِّل أبعاد العنصر النهائية.
• القيمة border-box تخبر المتصفح أن يضع بالحسبان قيمة عرض الإطار والحاشية عند تحديد العرض والارتفاع، أي لو ضبطنا عرض أحد العناصر إلى 100 بكسل، فستتضمن هذه القيمة عرض الإطار والحاشية، وسيتم إعادة تحجم صندوق المحتوى تبعًا لقيمة الإطار أو الحاشية، وهذه القيمة تُسهِّل تحديد أبعاد العناصر كثيرًا.

القيمة الابتدائية	content-box
تُطبَّق على	جميع العناصر التي يمكن تحديد قيمة للخاصية width و height فيها.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدَت.

أمثلة

أنشأنا في المثال الآتي عنصرَي <div> لهما الأبعاد نفسها (width و height) والحاشية نفسها (padding) والإطار نفسه (border)، لكن تختلف قيمة الخاصية box-sizing بينهما، وسيبدو الفرق بينهما جليًا:

<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>

شيفرة CSS:

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid salmon;
  background: #006699;
  color: white;
}

.content-box {
  box-sizing: content-box;
}

.border-box {
  box-sizing: border-box;
}

سنبيّن في المثال الآتي ثلاثة حالات، وفي كل حالة كان هنالك عنصر <div> أب (له إطار برتقالي) يحتوي على عنصر <div> ابن، وللعنصر الابن القاعدة width: 100%، وله خلفية زرقاء شفافة.

• في أوّل مثال استخدمنا القيمة الافتراضية content-box، ولم يكن للعنصر الابن إطار ولا حاشية، وظهر داخل العنصر الأب دون مشاكل.
• في المثال الثاني استخدامنا القيمة الافتراضية content-box، لكن أضفنا حاشية وإطار للعنصر الابن، وسنلاحظ كيف خرج العنصر الابن خارج العنصر الأب لأنَّ العرض المُحدَّد هو عرض صندوق المحتوى فقط، ثم أُضيفَت إليه قيمة عرض الإطار والحاشية.
• في المثال الثالث استخدمنا القيمة border-box، وأصبح العنصر الابن يتسع في العنصر الأب دون مشاكل، لأن قيمة العرض (100%) أصبحت تتضمن الحاشية والإطار.

<div class="container">
  <div class="parent">
    <p>Parent container</p>
    <div class="child" style="box-sizing: content-box;">
      <p>Child container</p>
      <p class="css">
      box-sizing: content-box;<br/>
      width: 100%;<br/>
      padding: 0;<br/>
      border-width: 0;</p>
    </div>
  </div>
  
  <div class="parent">
    <p>Parent container</p>
    <div class="child border-padding" style="box-sizing: content-box;">
      <p>Child container</p>
      <p class="css">
      box-sizing: content-box;<br/>
      width: 100%;<br/>
      padding: 5px;<br/>
      border-width: 10px;</p>
      </div>
  </div>
  
  <div class="parent">
    <p>Parent container</p>
    <div class="child border-padding"  style="box-sizing: border-box;">
      <p>Child container</p>
      <p class="css">
      box-sizing: border-box;<br/>
      width: 100%;<br/>
      padding: 5px;<br/>
      border-width: 10px;</p>
      </div>
  </div>
</div>

شيفرة CSS:

p {
  margin-left: 0.2em;
}

.container {
  display: flex;
}

.parent {
  width: 220px;
  border: solid 10px orange;
  margin: 0.8em;
}

.child {
  width: 100%;
  margin: 2em auto;
  background-color: rgba(229, 232, 252, 0.6);
}

.border-padding {
  padding: 5px;
  border: solid #5B6DCD 10px;
}

.css {
  font-family: monospace;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	10.0	29.0	8.0	7.0	5.1

بعض المتصفحات (مثل Chrome و Firefox و Safari) كانت تدعم هذه الخاصية في الإصدارات القديمة منها، لكن مع استخدام سابقة -webkit- أو -moz-.

كانت هنالك قيمة إضافية لهذه الخاصية ألا وهي padding-box، لكنها أُهمِلَت وحُذِفَت من أغلبية المتصفحات الحديثة.

البنية العامة

تقبل الخاصية box-sizing قيمةً واحدةً هي كلمةٌ محجوزةٌ من الكلمات المذكورة أدناه.

القيمة content-box

هذه هي القيمة الافتراضية في مواصفة CSS. وإذا ضُبِطَت قيم للخاصيتين width و height فستُمثِّل أبعاد صندوق المحتوى، دون إدخال الإطار border أو الحاشية padding أو الهوامش margin، أي لو قلنا أنَّ عرض أحد العناصر هو 350 بكسل، ثم ضبنا عرض الإطار (على جميع الحواف) مساويًا للقيمة 10 بكسل، فسيكون عرض العنصر النهائي الظاهر هو 370 بكسل.

الخلاصة: العرض المُحدَّد هو عرض صندوق المحتوى فقط، والارتفاع المُحدَّد هو ارتفاع صندوق المحتوى فقط.

القيمة border-box

إذا ضُبِطَت هذه القيمة فهي تعني أنَّ الأبعاد المضبوطة عبر الخاصيتين width و height هي الأبعاد النهائية للعنصر، بما في ذلك صندوق المحتوى والحاشية والإطار لكن دون إدخال الهوامش.

لو قلنا أنَّ عرض أحد العناصر هو 350 بكسل، ثم ضبنا عرض الإطار (على جميع الحواف) مساويًا للقيمة 10 بكسل، فسيكون عرض العنصر النهائي الظاهر هو 350 بكسل. يجدر بالذكر أنَّ أبعاد صندوق المحتوى لا يجوز أن تكون سالبةً، وستُقرَّب القيم السالبة إلى القيمة 0، أي لا يمكن استخدام القيمة border-box لجعل العنصر يختفي.

الخلاصة: العرض المُحدَّد هو عرض العنصر كله، والارتفاع المُحدَّد هو ارتفاع العنصر كله. بما في ذلك صندوق المحتوى والحاشية والإطار.

البنية الرسمية

box-sizing: content-box|border-box;

مصادر ومواصفات

• مواصفة CSS Basic User Interface Module Level 3.