مدل جعبه (Box Model)

درک کامل Box Model در CSS: محتوا، فاصله داخلی، حاشیه و فاصله خارجی و نحوه محاسبه ابعاد

مدل جعبه (Box Model) چیست؟

Box Model بنیادی‌ترین مفهوم CSS است. هر عنصر HTML یک «جعبه» مستطیلی است که از چهار لایه تشکیل شده:

┌─────────────────────────────────┐
    │            margin               │  ← فاصله خارجی
    │  ┌───────────────────────────┐  │
    │  │         border            │  │  ← حاشیه
    │  │  ┌─────────────────────┐  │  │
    │  │  │      padding        │  │  │  ← فاصله داخلی
    │  │  │  ┌───────────────┐  │  │  │
    │  │  │  │   content     │  │  │  │  ← محتوا
    │  │  │  │               │  │  │  │
    │  │  │  └───────────────┘  │  │  │
    │  │  └─────────────────────┘  │  │
    │  └───────────────────────────┘  │
    └─────────────────────────────────┘

چهار لایه Box Model

لایهویژگیتوضیح
۱. Content (محتوا)width / heightمتن، تصویر، و...
۲. Padding (فاصله داخلی)paddingفضای داخل حاشیه
۳. Border (حاشیه)borderخط دور عنصر
۴. Margin (فاصله خارجی)marginفضای خارج عنصر

محاسبه اندازه واقعی

⚠️ این یکی از مهم‌ترین نکات CSS است:

/* در حالت پیش‌فرض (content-box): */
    عرض واقعی = width + padding-left + padding-right + border-left + border-right
    ارتفاع واقعی = height + padding-top + padding-bottom + border-top + border-bottom

مثال محاسبه

.box {
        width: 200px;
        height: 100px;
        padding: 20px;
        border: 5px solid red;
        margin: 10px;
    }
    
    /* عرض واقعی = 200 + 20 + 20 + 5 + 5 = 250px! */
    /* ارتفاع واقعی = 100 + 20 + 20 + 5 + 5 = 150px! */
    /* فضای کل (با margin) = 270 × 170px! */

box-sizing — راه‌حل قطعی ⭐

ویژگی box-sizing نحوه محاسبه ابعاد را تغییر می‌دهد:

/* پیش‌فرض — padding و border اضافه می‌شوند */
    * {
        box-sizing: content-box;  /* حالت پیش‌فرض */
    }
    
    /* ⭐ مدرن — padding و border داخل width هستند */
    * {
        box-sizing: border-box;
    }
ویژگیcontent-boxborder-box
width یعنیعرض محتواعرض کل (با padding و border)
محاسبهسختآسان
توصیه❌✅ همیشه استفاده کنید

ریست جهانی Box Model

این خط را همیشه در ابتدای فایل CSS قرار دهید:

/* ریست Box Model برای همه عناصر */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

DevTools و Box Model

در ابزار DevTools مرورگر (F12)، می‌توانید مدل جعبه هر عنصر را به‌صورت بصری ببینید — یک نمودار رنگی که تمام لایه‌ها را نمایش می‌دهد.

display و Box Model

نوع display رفتار Box Model را تغییر می‌دهد:

Displayعرض پیش‌فرضقابل تنظیم
block۱۰۰٪ والد✅
inlineمتناسب محتوا❌
inline-blockمتناسب محتوا✅
flex / grid۱۰۰٪ والد✅

margin و padding در inline

عناصر inline (span، a، em) فقط margin و padding افقی می‌پذیرند — عمودی تأثیر بصری ندارد:

/* ❌ این روی span کار نمی‌کند */
    span {
        margin-top: 20px;     /* بی‌تأثیر */
        padding-top: 20px;    /* روی چیدمان اثر دارد ولی روی سطرها */
    }
    
    /* ✅ این کار می‌کند */
    span {
        margin-left: 10px;    /* ✅ */
        padding-right: 15px;  /* ✅ */
    }

مثال عملی: ساخت یک کارت

.card {
        /* لایه ۱: محتوا */
        width: 300px;
    
        /* لایه ۲: padding */
        padding: 20px;
    
        /* لایه ۳: border */
        border: 2px solid #ddd;
    
        /* لایه ۴: margin */
        margin: 20px auto;
    
        /* استایل‌های اضافی */
        background: white;
        border-radius: 12px;
        box-sizing: border-box;
    }

مشکلات رایج

۱. عرض بیشتر از انتظار

/* مشکل: عنصر از کانتینر بیرون می‌زند */
    .box {
        width: 100%;
        padding: 20px;
        border: 1px solid #ccc;
        /* عرض واقعی = 100% + 40px + 2px = بیش از ۱۰۰٪! */
    }
    
    /* راه‌حل */
    .box {
        box-sizing: border-box;
    }

۲. ارتفاع نابرابر ستون‌ها

/* راه‌حل: Flexbox */
    .row {
        display: flex;
        align-items: stretch;
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط