وثائق CSS قابلة للتشغيل: نموذج الصندوق

Q: ماذا تفعل box-sizing: border-box؟

تجعل width وheight تشملان الحشو والحد. الصندوق الذي عرضه width: 200px مع padding: 20px وحد بعرض 5px يصبح عرضه 200px بالضبط، وتتقلص منطقة المحتوى إلى 150px لتتسع. أما القيمة الافتراضية content-box فتضيف الحشو والحد فوقه، فيصبح العرض 250px.

Q: كيف يُحسب العرض الكلي للعنصر؟

مع content-box الافتراضية: العرض + الحشو الأيمن والأيسر + الحد الأيمن والأيسر. ومع border-box: قيمة width فقط. الهامش خارج الصندوق في الحالتين، فيضيف إلى المساحة التي يشغلها العنصر لا إلى عرضه نفسه.

Q: هل أضبط box-sizing: border-box على كل العناصر؟

معظم المشاريع تفعل ذلك، عبر , ::before, *::after { box-sizing: border-box; } في أعلى ملف الأنماط. يجعل هذا العروض بالنسب المئوية والحشو تتجمع كما يتوقع الناس، وأطر العمل مثل Bootstrap وTailwind تأتي بإعادة الضبط نفسها.

الطبقات الأربع لكل صندوق

كل عنصر في الصفحة يُرسم كمستطيل من أربع طبقات، من الداخل إلى الخارج:

المحتوى: النص أو الصورة أو العناصر الأبناء، وحجمه تحدده width وheight.
الحشو (padding): مسافة داخل الصندوق، بين المحتوى والحد. تظهر فيها خلفية العنصر.
الحد (border): الخط المحيط بالحشو.
الهامش (margin): مسافة خارج الحد تدفع الصناديق الأخرى بعيدًا. شفاف دائمًا.

في المثال لكل طبقة لونها: المحتوى أزرق، والحشو أخضر، والحد داكن، والمنطقة الكهرمانية حول الصندوق هي الهامش (يرسمها غلاف، لأن الهامش نفسه شفاف).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box model</title>
  <style>
    .margin-area {
      display: flow-root; /* keeps the margin inside the amber wrapper */
      background: #f59e0b;
      width: max-content;
    }
    .box {
      width: 160px;
      height: 60px;
      padding: 20px;
      border: 10px solid #111827;
      margin: 24px;
      /* blue over the content only, green over the padding */
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
    }
  </style>
</head>
<body>
  <div class="margin-area">
    <div class="box">content</div>
  </div>
  <p id="out"></p>
  <script>
    const box = document.querySelector('.box');
    const s = getComputedStyle(box);
    document.getElementById('out').textContent =
      'content ' + s.width + ' + padding ' + s.paddingLeft + ' x 2 + border ' +
      s.borderLeftWidth + ' x 2 = ' + box.getBoundingClientRect().width + 'px wide';
  </script>
</body>
</html>

السطر تحت الصندوق يقيسه المتصفح: 160 + 20 + 20 + 10 + 10 = 220px. يضيف الهامش 24px أخرى على كل جانب من ذلك، لكنه خارج الصندوق، فلا يدخل في الـ 220.

حساب العرض: content-box مقابل border-box

افتراضيًا (box-sizing: content-box) تضبط width المحتوى وحده. يُضاف الحشو والحد فوقه، فيصبح الصندوق أعرض من الرقم الذي كتبته. أما مع box-sizing: border-box فتكون width هي الصندوق كله، ويتقلص المحتوى ليفسح مكانًا للحشو والحد.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>box-sizing</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      border: 5px solid #111827;
      background: #e5e7eb;
      margin-bottom: 12px;
    }
    .content { box-sizing: content-box; }
    .border { box-sizing: border-box; background: #bfdbfe; }
  </style>
</head>
<body>
  <div class="box content">content-box</div>
  <div class="box border">border-box</div>
  <script>
    document.querySelectorAll('.box').forEach((el) => {
      el.textContent += ': ' + el.getBoundingClientRect().width + 'px wide';
    });
  </script>
</body>
</html>

	`content-box` (الافتراضي)	`border-box`
معنى `width`	المحتوى	المحتوى + الحشو + الحد
`width: 200px; padding: 20px; border: 5px`	عرضه 250px	عرضه 200px
منطقة المحتوى في هذه الحالة	200px	150px
الهامش	خارجي، لا يُحسب	خارجي، لا يُحسب

إعادة الضبط border-box

لأن border-box تجعل الأحجام تتجمع بشكل منطقي، يبدأ كل ملف أنماط حديث تقريبًا بهذه القاعدة:

*,
*::before,
*::after {
  box-sizing: border-box;
}

تظهر أهميتها أكثر مع النسب المئوية. عمودان بعرض width: 50% مع حشو لا يتسعان في سطر واحد تحت content-box، لأن كلًا منهما 50% زائد حشوه:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Columns</title>
  <style>
    .row { width: 400px; background: #e5e7eb; margin-bottom: 12px; }
    .col {
      display: inline-block;
      width: 50%;
      padding: 10px;
      border: 2px solid #2563eb;
      vertical-align: top;
    }
    .fixed .col { box-sizing: border-box; }
  </style>
</head>
<body>
  <div class="row"><!--
 --><div class="col">content-box</div><!--
 --><div class="col">wraps to a new line</div><!--
--></div>
  <div class="row fixed"><!--
 --><div class="col">border-box</div><!--
 --><div class="col">fits side by side</div><!--
--></div>
</body>
</html>

(تعليقات HTML تزيل المسافة بين العمودين من نوع inline-block، والتي كانت ستضيف بضع بكسلات.)

رؤية نموذج الصندوق في DevTools

كل متصفح يرسم نموذج الصندوق لك. انقر بالزر الأيمن على عنصر، واختر Inspect، وافتح تبويب Computed (أو Layout في Firefox): يعرض مخطط حجم المحتوى في الوسط، تحيط به قيم الحشو والحد والهامش. ومرور المؤشر فوق عنصر في لوحة Elements يلوّن الصفحة أيضًا: المحتوى أزرق، والحشو أخضر، والهامش برتقالي.

الصناديق السطرية تتبع قواعد مختلفة

يصف نموذج الصندوق أعلاه الصناديق الكتلية مثل <div> و<p>. أما العناصر السطرية مثل <span> و<a> و<strong> فتلتف داخل سطر النص، وتتعامل مع المسافة العمودية بشكل مختلف:

الخاصية	على عنصر سطري
`width`، `height`	تُتجاهل
الحشو والحد والهامش الأفقية	تُطبق، وتدفع العناصر المجاورة جانبيًا
الحشو والحد العموديان	يُرسمان، لكنهما لا يدفعان الأسطر التي فوقهما وتحتهما
الهامش العمودي	يُتجاهل

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline box</title>
  <style>
    p { width: 320px; line-height: 1.5; }
    span {
      background: #bfdbfe;
      padding: 12px 6px;
      margin: 30px 0;
      border: 2px solid #2563eb;
    }
    .ib { display: inline-block; }
  </style>
</head>
<body>
  <p>Text before an <span>inline span</span> whose vertical padding overlaps the lines around it.</p>
  <p>Text before an <span class="ib">inline-block</span> that makes room for its padding and margin.</p>
</body>
</html>

تعطي display: inline-block العنصر الموجود داخل السطر نموذج الصندوق الكامل: عرضه وارتفاعه وحشوه وهامشه كلها تشغل مساحة. راجع padding في CSS وmargin في CSS لكل طبقة بالتفصيل.

أخطاء شائعة

إضافة حشو إلى صندوق ثابت العرض والتساؤل لماذا كبر. تحت content-box يُضاف الحشو والحد إلى width. استخدم border-box.
توقع أن يأخذ الهامش لون الخلفية. الهامش شفاف دائمًا؛ استخدم الحشو للمسافة الملونة.
ضبط height أو هامش عمودي على عنصر سطري. لا يحدث شيء؛ استخدم display: inline-block أو block.
نسيان الحدود في الحساب. حد بعرض 1px على عنصر width: 100% يجعله أعرض بـ 2px تحت content-box، وقد يسبب ذلك شريط تمرير أفقيًا.
الخلط بين الهامش والحشو. باختصار: الحشو داخل الحد، والهامش خارجه. تضعهما صفحة الفرق بين margin وpadding جنبًا إلى جنب.

الأسئلة الشائعة

ما هو نموذج الصندوق في CSS؟

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

ماذا تفعل box-sizing: border-box؟

تجعل width وheight تشملان الحشو والحد. الصندوق الذي عرضه width: 200px مع padding: 20px وحد بعرض 5px يصبح عرضه 200px بالضبط، وتتقلص منطقة المحتوى إلى 150px لتتسع. أما القيمة الافتراضية content-box فتضيف الحشو والحد فوقه، فيصبح العرض 250px.

كيف يُحسب العرض الكلي للعنصر؟

مع content-box الافتراضية: العرض + الحشو الأيمن والأيسر + الحد الأيمن والأيسر. ومع border-box: قيمة width فقط. الهامش خارج الصندوق في الحالتين، فيضيف إلى المساحة التي يشغلها العنصر لا إلى عرضه نفسه.

هل الهامش margin جزء من نموذج الصندوق؟

نعم، هو الطبقة الخارجية، لكنه شفاف دائمًا ولا يُحسب أبدًا في عرض العنصر نفسه أو خلفيته. وظيفته فقط دفع الصناديق المجاورة بعيدًا.

هل أضبط box-sizing: border-box على كل العناصر؟

معظم المشاريع تفعل ذلك، عبر *, *::before, *::after { box-sizing: border-box; } في أعلى ملف الأنماط. يجعل هذا العروض بالنسب المئوية والحشو تتجمع كما يتوقع الناس، وأطر العمل مثل Bootstrap وTailwind تأتي بإعادة الضبط نفسها.

مفاهيم ذات صلة