صندوق العنصر (Box Model)

كل عنصر هو صندوق

في CSS، كل عنصر عبارة عن صندوق مكوّن من أربع طبقات من الداخل للخارج:

┌──────────── margin (هامش خارجي) ────────────┐
│  ┌────────── border (حدّ) ──────────┐       │
│  │  ┌──────── padding (حشو) ──────┐ │       │
│  │  │        المحتوى (content)     │ │       │
│  │  └────────────────────────────┘ │       │
│  └─────────────────────────────────┘       │
└─────────────────────────────────────────────┘

الخصائص

.card {
  width: 300px;
  padding: 16px;            /* مسافة داخلية حول المحتوى */
  border: 2px solid #b026ff; /* الحدّ */
  margin: 24px;            /* مسافة خارجية تفصله عن غيره */
}

نصيحة ذهبية: box-sizing

أضف هذا في بداية كل مشروع ليصبح حساب الأبعاد منطقيًا:

* {
  box-sizing: border-box;
}

بهذا تشمل width الحشو والحدّ، فلا تتفاجأ بعنصر أكبر من المتوقّع.

جرّبها بنفسك

عدّل قيم padding و margin و border وشاهد أثرها على الصندوق مباشرة:

🎯 التالي: تنسيق النصوص والخطوط.