نموذج الصندوق في CSS: margin وpadding وborder

كل عنصر في الصفحة صندوق مستطيل، حتى لو بدا دائريًا. فهم هذا الصندوق هو مفتاح التخطيط في CSS.

طبقات الصندوق

من الداخل للخارج:

1. المحتوى (content): النص أو الصورة.
2. الحشوة (padding): مسافة بين المحتوى والحد.
3. الحد (border): الإطار.
4. الهامش (margin): مسافة بين العنصر وما حوله.

كتابة القيم المختصرة

padding: 10px;              /* الجهات الأربع */
padding: 10px 20px;         /* أعلى وأسفل 10، الجانبان 20 */
padding: 5px 10px 15px 20px; /* أعلى، يمين، أسفل، يسار (اتجاه الساعة) */
margin: 0 auto;             /* يوسّط عنصرًا له عرض محدد */

وللجهة الواحدة: margin-top وpadding-inline-start (بداية السطر: يمين في العربية).

box-sizing: المشكلة والحل

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

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

الآن العرض يشمل الحشوة والحد. ضع هذا السطر في بداية كل مشروع.

block وinline

• block (div, p, h1): سطر كامل، ويقبل width وheight.
• inline (span, a, strong): بحجم محتواه، ولا يقبل width.
• inline-block: في السطر ويقبل الأبعاد.

الزوايا والظلال

border-radius: 50% على مربع يصنع دائرة.

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

الخلاصة

• كل عنصر صندوق: محتوى، حشوة، حد، هامش.
• box-sizing: border-box لكل المشاريع.
• block للكتل، وinline للسطر، وborder-radius وbox-shadow للمسة الحديثة.