نموذج الصندوق

افهم كيف أن كل عنصر صندوق مكوّن من محتوى وحشو وحدّ وهامش، وأتقِن box-sizing.

10 دقيقة · 3 أسئلة

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

تتحكّم ثلاث خصائص بهذه الطبقات. padding تضبط المساحة الداخلية، بين المحتوى والحدّ. وborder ترسم الحدّ: تمنحه سُمكًا ونمطًا (‏solid لخط مصمت) ولونًا. وmargin تضبط المساحة الخارجية، التي تدفع العناصر المجاورة بعيدًا. كل هذه المسافات تُعبَّر عنها بالبكسل (‏px).

.card {
  padding: 16px;
  border: 2px solid black;
  margin: 24px;
}

يمكنك ضبط كل جانب على حدة عبر padding-top وpadding-right وpadding-bottom وpadding-left، والأمر نفسه بالنسبة لـ margin. هناك أيضًا صيغ مختصرة: بقيمتين، تنطبق الأولى على الأعلى والأسفل، والثانية على اليسار واليمين. إذًا padding: 8px 16px; تعني 8 بكسل على الأعلى والأسفل، و16 بكسل على اليسار واليمين.

.card {
  padding: 8px 16px;
  margin-top: 32px;
  margin-bottom: 8px;
}

مطبّ كلاسيكي: افتراضيًا، عندما تكتب width: 200px; (خاصية width تضبط العرض)، فإن تلك الـ 200 بكسل تغطّي المحتوى فقط. أما الحشو والحدّ فيُضافان فوقها! صندوق بـ width: 200px وpadding: 16px وborder: 2px يشغل فعليًا 200 + 16 + 16 + 2 + 2 = 236 بكسل من العرض. تصلح خاصية box-sizing: border-box; هذا الأمر: يشمل العرض المعلَن حينها الحشو والحدّ. يصبح الصندوق بعرض 200 بكسل حقًا، وهو المحتوى الذي ينكمش.

* {
  box-sizing: border-box;
}

.card {
  width: 200px;
  padding: 16px;
  border: 2px solid black;
}

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. أي خاصية تضبط المساحة بين محتوى الصندوق وحدّه؟
   • margin
   • padding
   • border
   • width
2. من دون box-sizing: border-box، ما إجمالي العرض الذي يشغله صندوق بـ width: 100px وpadding: 10px وborder: 5px solid black؟
   • 100 بكسل
   • 115 بكسل
   • 130 بكسل
   • 110 بكسل
3. ماذا تعني الصيغة المختصرة margin: 10px 20px;؟
   • 10 بكسل على اليسار واليمين، و20 بكسل على الأعلى والأسفل
   • 10 بكسل على الأعلى والأسفل، و20 بكسل على اليسار واليمين
   • 10 بكسل على الأعلى، و20 بكسل على الأسفل