نموذج الصندوق (Box Model) — تصميم CSS

نموذج الصندوق (Box Model)

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

┌──────────── margin (الهامش: مسافة خارجية شفافة) ────────────┐
│  ┌──────── border (الحد) ─────────────────────────────────┐  │
│  │  ┌──── padding (الحشو: مسافة داخلية بلون الخلفية) ───┐  │  │
│  │  │            content (المحتوى)                       │  │  │
│  │  └────────────────────────────────────────────────────┘  │  │
│  └──────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────┘

افتح أدوات المطور وانقر على عنصر: تبويب Computed يرسم هذا الصندوق بأرقامه الحقيقية.

box-sizing: لماذا border-box؟

.box {
    width: 300px;
    padding: 20px;
    border: 2px solid;
}

- content-box (الافتراضي القديم): العرض الحقيقي = 300 + 40 + 4 = 344px! الحشو والحد يُضافان.

- border-box: العرض الحقيقي = 300px، والمحتوى يتقلص ليتسع للحشو والحد.

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

هذا السطر في بداية كل مشروع تقريباً — يجعل الأحجام كما تكتبها.

الاختصارات (الاتجاهات مع عقارب الساعة)

.a { padding: 16px; }               /* الجهات الأربع */
.b { padding: 8px 16px; }           /* أعلى/أسفل 8، الجانبان 16 */
.c { padding: 8px 16px 24px; }      /* أعلى 8، الجانبان 16، أسفل 24 */
.d { padding: 8px 12px 16px 20px; } /* أعلى، يمين، أسفل، يسار */

⚠️ القيم الأربع فيزيائية: "يمين" هي يمين الشاشة دائماً حتى في الصفحات العربية. للجهات حسب اتجاه النص استخدم الخصائص المنطقية: padding-inline و padding-block (درس كامل لاحقاً).

الحدود

.card {
    border: 1px solid #e5e7eb;        /* سماكة، نمط، لون */
    border-radius: 12px;              /* زوايا دائرية */
}
.avatar { border-radius: 50%; }       /* دائرة (إن كان العرض = الارتفاع) */
.tab { border-block-end: 3px solid currentColor; }

انهيار الهوامش (Margin Collapse)

هامشان رأسيان متجاوران بين عنصري كتلة لا يُجمعان، بل يُؤخذ الأكبر:

h2 { margin-bottom: 24px; }
p { margin-top: 16px; }
/* المسافة بينهما 24px وليس 40px */

يحدث للهوامش الرأسية فقط، ولا يحدث داخل Flexbox و Grid. إن فاجأتك مسافة "مفقودة"، هذا السبب غالباً.

التوسيط الأفقي

.container {
    max-width: 1100px;
    margin-inline: auto;     /* هامش تلقائي على الجانبين = توسيط */
    padding-inline: 16px;    /* مسافة عن حواف الشاشة الصغيرة */
}

max-width بدل width: على الشاشة الصغيرة يتقلص العنصر بدل أن يتجاوزها.

الظلال

box-shadow: 0 4px 12px rgb(0 0 0 / 10%); — إزاحة أفقية، رأسية، تمويه، لون. الظلال الخفيفة أجمل من الداكنة.

تمرين

صمم بطاقة مشروع: عرض أقصى 360px، حشو 20px، حد رمادي فاتح، زوايا 12px، ظل خفيف، وهامش سفلي 24px. ضع ثلاث بطاقات تحت بعضها ولاحظ انهيار الهوامش في أدوات المطور.

/* إعداد box-sizing للكل */
*, *::before, *::after {
    box-sizing: border-box;
}

/* مثال على Box Model */
.card {
    /* المحتوى */
    width: 300px;
    height: auto;
    
    /* الحشو - من الداخل */
    padding: 20px;
    /* أو بالتفصيل */
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    /* أو مختصر: padding: top right bottom left */
    padding: 20px 15px 20px 15px;
    
    /* الحدود */
    border: 2px solid #3498db;
    border-radius: 10px;
    
    /* الهامش - من الخارج */
    margin: 20px;
    /* أو للتوسيط أفقياً */
    margin: 20px auto;
}

/* حدود متعددة */
.fancy-border {
    border: 3px solid;
    border-color: #e74c3c #f39c12 #2ecc71 #3498db;
    /* أعلى يمين أسفل يسار */
}

/* ظل الصندوق */
.shadow-box {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ظل داخلي */
.inner-shadow {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}