وقتی با CSS شروع به طراحی صفحات وب می‌کنید، خیلی زود با یک سؤال مهم روبه‌رو می‌شوید: چرا یک عنصر با وجود اینکه برای آن width مشخص کرده‌ایم، بزرگ‌تر از چیزی است که انتظار داشتیم؟ چرا فاصله بین دو عنصر ایجاد شده؟ چرا متن داخل یک کارت به لبه‌های آن چسبیده است؟ و چرا اضافه کردن یک border باعث می‌شود اندازه ظاهری عنصر تغییر کند؟

پاسخ بسیاری از این سؤال‌ها در مفهومی به نام CSS Box Model قرار دارد.

تقریباً هر عنصر قابل مشاهده در صفحه وب را می‌توان مانند یک جعبه در نظر گرفت. این جعبه از قسمت‌های مختلفی تشکیل شده است: محتوا، Padding، Border و Margin. شناخت درست این چهار بخش به شما کمک می‌کند اندازه و فاصله عناصر را دقیق‌تر کنترل کنید و مشکلات رایج طراحی صفحات را راحت‌تر پیدا کنید.

در این مقاله ابتدا Box Model را به‌صورت ساده یاد می‌گیریم، سپس با padding، border، margin و outline کار می‌کنیم و در نهایت با box-sizing یاد می‌گیریم چگونه اندازه عناصر را قابل پیش‌بینی‌تر کنیم.

Box Model چیست؟

مدل جعبه‌ای یا Box Model روشی است که CSS برای محاسبه و نمایش فضای اشغال‌شده توسط عناصر استفاده می‌کند.

به‌صورت ساده، یک عنصر CSS را می‌توان به این شکل تصور کرد:

┌─────────────────────────────────────────┐
│                 Margin                  │
│   ┌─────────────────────────────────┐   │
│   │             Border              │   │
│   │   ┌─────────────────────────┐   │   │
│   │   │         Padding         │   │   │
│   │   │   ┌─────────────────┐   │   │   │
│   │   │   │     Content     │   │   │   │
│   │   │   └─────────────────┘   │   │   │
│   │   └─────────────────────────┘   │   │
│   └─────────────────────────────────┘   │
└─────────────────────────────────────────┘

از داخل به خارج:

1. Content — محتوای عنصر

2. Padding — فاصله بین محتوا و Border

3. Border — خط یا حاشیه اطراف عنصر

4. Margin — فاصله بیرونی عنصر با عناصر اطراف

MDN نیز Box Model را بر اساس همین چهار ناحیه توضیح می‌دهد: content، padding، border و margin.

Content چیست؟

Content یا محتوای عنصر، قسمت اصلی آن است.

برای مثال در این کد:

<div class="box">
    سلام، به سایت من خوش آمدید.
</div>

متن داخل div همان Content است.

اگر تصویر داخل عنصر قرار داشته باشد، تصویر بخشی از محتوای آن عنصر محسوب می‌شود.

<div class="box">
    <img src="image.jpg" alt="تصویر نمونه">
</div>

بنابراین Content می‌تواند شامل موارد مختلفی مانند:

• متن

• تصویر

• لینک

• فرم

• دکمه

• عناصر HTML دیگر

باشد.

Padding چیست؟

padding فاصله داخل عنصر است؛ یعنی فاصله بین محتوا و Border.

فرض کنید یک کارت دارید:

<div class="card">
    <h2>عنوان محصول</h2>
    <p>توضیحات محصول</p>
</div>

اگر هیچ Padding نداشته باشید، محتوای کارت ممکن است بیش از حد به لبه‌های آن نزدیک شود.

.card {
    padding: 20px;
}

حالا از چهار طرف محتوا، ۲۰ پیکسل فاصله ایجاد می‌شود.

┌──────────────────────────────┐
│          Padding             │
│    ┌────────────────────┐    │
│    │      Content       │    │
│    └────────────────────┘    │
│          Padding             │
└──────────────────────────────┘

Padding معمولاً برای ایجاد فضای داخلی عناصر استفاده می‌شود.

انواع Padding

می‌توان Padding هر چهار طرف را به‌صورت جداگانه مشخص کرد.

Padding بالا

padding-top: 20px;

Padding راست

padding-right: 20px;

Padding پایین

padding-bottom: 20px;

Padding چپ

padding-left: 20px;

مثلاً:

.card {
    padding-top: 20px;
    padding-right: 30px;
    padding-bottom: 20px;
    padding-left: 30px;
}

Shorthand برای Padding

می‌توانیم به جای نوشتن چهار ویژگی جداگانه، از padding استفاده کنیم.

یک مقدار

padding: 20px;

یعنی هر چهار طرف:

top    = 20px
right  = 20px
bottom = 20px
left   = 20px

دو مقدار

padding: 10px 20px;

به این معنی است:

top    = 10px
bottom = 10px

right  = 20px
left   = 20px

سه مقدار

padding: 10px 20px 30px;

یعنی:

top    = 10px
right  = 20px
left   = 20px
bottom = 30px

چهار مقدار

padding: 10px 20px 30px 40px;

ترتیب همیشه:

Top → Right → Bottom → Left

یعنی:

top    = 10px
right  = 20px
bottom = 30px
left   = 40px

یک روش ساده برای به خاطر سپردن این ترتیب این است:

ساعت‌گرد حرکت می‌کنیم.

        Top
         ↑
Left ←       → Right
         ↓
       Bottom

Border چیست؟

border یا حاشیه، خطی است که اطراف Padding و Content قرار می‌گیرد.

برای مثال:

.card {
    border: 1px solid #ddd;
}

ساختار به این صورت است:

┌──────────────────────────────┐
│            Border            │
│   ┌──────────────────────┐   │
│   │       Padding        │   │
│   │   ┌──────────────┐   │   │
│   │   │   Content    │   │   │
│   │   └──────────────┘   │   │
│   └──────────────────────┘   │
└──────────────────────────────┘

Border معمولاً از سه بخش تشکیل می‌شود:

border-width
border-style
border-color

ضخامت Border

border-width: 2px;

نوع Border

border-style: solid;

برخی مقدارهای رایج:

solid
dashed
dotted
double

مثلاً:

border-style: dashed;

یا:

border-style: dotted;

رنگ Border

border-color: #333;

روش کوتاه نوشتن Border

در بیشتر مواقع از Shorthand استفاده می‌کنیم:

border: 1px solid #333;

یعنی:

1px    → ضخامت
solid  → نوع
#333   → رنگ

Border برای هر طرف

همانند Padding می‌توان برای هر طرف Border جداگانه تعریف کرد.

border-top: 2px solid red;
border-right: 1px solid blue;
border-bottom: 2px solid green;
border-left: 1px solid orange;

همچنین می‌توان ویژگی‌های یک سمت را جداگانه تنظیم کرد:

border-top-width: 3px;
border-top-style: solid;
border-top-color: red;

Margin چیست؟

margin فاصله خارج از Border است.

به زبان ساده:

Padding فضای داخل عنصر است، اما Margin فضای بیرون عنصر است.

مثلاً:

.card {
    margin: 20px;
}

باعث می‌شود عنصر از عناصر اطراف خود فاصله بگیرد.

          Margin
┌──────────────────────────────┐
│   ┌──────────────────────┐   │
│   │       Border         │   │
│   │   ┌──────────────┐   │   │
│   │   │   Content    │   │   │
│   │   └──────────────┘   │   │
│   └──────────────────────┘   │
└──────────────────────────────┘

MDN نیز Margin را فضای بیرونی اطراف Border معرفی می‌کند که برای جدا کردن عنصر از عناصر اطراف استفاده می‌شود.

تفاوت Padding و Margin

این تفاوت را باید به‌خوبی یاد بگیرید.

فرض کنید یک کارت داریم:

.card {
    padding: 20px;
    margin: 20px;
}

padding باعث می‌شود:

Border
  ↓
┌──────────────────────┐
│      Padding         │
│   ┌──────────────┐   │
│   │   Content    │   │
│   └──────────────┘   │
└──────────────────────┘

اما margin باعث ایجاد فاصله با عناصر بیرونی می‌شود:

       Margin
          ↓
      ┌───────┐
      │ Card  │
      └───────┘
          ↑
       Margin

به‌صورت خلاصه:

انواع Margin

مانند Padding:

margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;

و Shorthand:

margin: 20px;

یا:

margin: 10px 20px;

یا:

margin: 10px 20px 30px;

یا:

margin: 10px 20px 30px 40px;

همان ترتیب قبلی برقرار است:

Top → Right → Bottom → Left

قرار دادن عنصر در مرکز با Margin

یکی از کاربردهای بسیار مهم margin استفاده از auto است.

فرض کنید یک عنصر داریم:

.container {
    width: 600px;
    margin: 0 auto;
}

در این حالت، وقتی فضای کافی در اطراف عنصر وجود داشته باشد، مرورگر مقدار مناسب حاشیه چپ و راست را به‌صورت خودکار محاسبه می‌کند و عنصر را در مرکز قرار می‌دهد.

مثلاً:

<div class="container">
    محتوای من
</div>

.container {
    width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #eee;
}

این روش در طراحی صفحات بسیار رایج است.

البته در طراحی‌های مدرن، مخصوصاً هنگام کار با Flexbox و Grid، روش‌های دیگری نیز برای مرکز کردن عناصر خواهیم داشت که در مقالات آینده یاد می‌گیریم.

Margin Collapse چیست؟

یکی از رفتارهای مهم Margin که ممکن است در ابتدا کمی عجیب به نظر برسد، Margin Collapse است.

در برخی شرایط، Margin عمودی دو عنصر Block به جای اینکه با هم جمع شوند، ممکن است در هم ادغام شوند و فقط بزرگ‌ترین مقدار باقی بماند.

مثلاً:

.box1 {
    margin-bottom: 30px;
}

.box2 {
    margin-top: 20px;
}

ممکن است انتظار داشته باشید فاصله بین دو عنصر:

30 + 20 = 50px

باشد.

اما در بعضی شرایط، Marginها Collapse می‌شوند و فاصله نهایی می‌تواند برابر با مقدار بزرگ‌تر، یعنی 30px باشد. این رفتار به شرایط و ساختار عناصر بستگی دارد.

در این مرحله لازم نیست تمام قوانین Margin Collapse را حفظ کنید. مهم است بدانید چنین رفتاری وجود دارد تا اگر در آینده با فاصله‌ای غیرمنتظره مواجه شدید، بدانید یکی از احتمالات همین موضوع است.

Outline چیست؟

outline شباهت زیادی به Border دارد، اما دقیقاً همان Border نیست.

مثلاً:

button {
    outline: 2px solid blue;
}

Outline معمولاً خارج از Border رسم می‌شود و برخلاف Border، بخشی از اندازه اصلی Box Model محسوب نمی‌شود.

به همین دلیل اضافه کردن Outline معمولاً باعث نمی‌شود اندازه Layout عنصر مانند اضافه کردن Border تغییر کند.

تفاوت Border و Outline

یکی از کاربردهای مهم Outline، مشخص کردن عنصر دارای Focus است.

مثلاً هنگام حرکت با صفحه‌کلید، مرورگر ممکن است روی یک دکمه یا لینک Outline نمایش دهد تا کاربر بداند Focus روی کدام عنصر قرار دارد.

به همین دلیل نباید بدون دلیل این ویژگی را حذف کنیم:

button {
    outline: none;
}

اگر Outline مربوط به Focus را حذف می‌کنید، باید یک روش واضح و قابل مشاهده جایگزین آن کنید تا کاربران بتوانند Focus را تشخیص دهند.

Box Sizing چیست؟

حالا به یکی از مهم‌ترین بخش‌های Box Model می‌رسیم:

box-sizing

این ویژگی تعیین می‌کند width و height چگونه در اندازه نهایی عنصر محاسبه شوند.

دو مقدار مهم آن عبارت‌اند از:

content-box

و:

border-box

content-box

مقدار پیش‌فرض box-sizing، content-box است.

یعنی اگر بنویسیم:

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

در حالت content-box:

Width content = 300px
Padding left  = 20px
Padding right = 20px
Border left   = 5px
Border right  = 5px

پس عرض نهایی:

300 + 20 + 20 + 5 + 5
= 350px

خواهد بود.

یعنی:

.box {
    width: 300px;
}

به این معنی نیست که کل جعبه دقیقاً 300 پیکسل است؛ بلکه در content-box، مقدار Width مربوط به Content است.

border-box

حالا اگر بنویسیم:

.box {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 5px solid black;
}

در این حالت width: 300px شامل:

• Content

• Padding

• Border

می‌شود.

بنابراین عرض کلی عنصر همان:

300px

باقی می‌ماند.

فضای Content کوچک‌تر می‌شود تا Padding و Border در همین 300 پیکسل جا بگیرند.

مقایسه content-box و border-box

content-box

.box {
    box-sizing: content-box;
    width: 300px;
    padding: 20px;
    border: 5px solid black;
}

عرض نهایی:

350px

border-box

.box {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 5px solid black;
}

عرض نهایی:

300px

این تفاوت در طراحی Layout اهمیت زیادی دارد.

یک تنظیم رایج برای پروژه‌ها

بسیاری از توسعه‌دهندگان برای قابل پیش‌بینی‌تر شدن اندازه عناصر، border-box را برای عناصر صفحه فعال می‌کنند:

html {
    box-sizing: border-box;
}

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

با این کار، عناصر و pseudo-elementها از این مدل اندازه‌گیری استفاده می‌کنند.

در پروژه‌های آموزشی و واقعی ممکن است این کد را زیاد ببینید. border-box معمولاً مدیریت اندازه عناصر را ساده‌تر می‌کند.

یک مثال کامل از Box Model

بیایید یک کارت ساده ایجاد کنیم.

HTML

<div class="card">
    <h2>دوره طراحی وب</h2>

    <p>
        در این دوره با HTML و CSS و اصول طراحی صفحات وب آشنا می‌شوید.
    </p>

    <a href="#">مشاهده دوره</a>
</div>

CSS

.card {
    width: 350px;

    padding: 24px;

    border: 1px solid #ddd;

    margin: 30px auto;

    background-color: #ffffff;
}

در این مثال:

width
  ↓
عرض Content

padding
  ↓
فاصله متن از Border

border
  ↓
حاشیه اطراف کارت

margin
  ↓
فاصله کارت از عناصر اطراف

ساخت یک کارت زیباتر

حالا می‌توانیم همان کارت را کمی بهتر طراحی کنیم:

.card {
    width: 350px;
    box-sizing: border-box;

    padding: 24px;

    margin: 30px auto;

    border: 1px solid #ddd;

    background-color: #fff;
}

عنوان:

.card h2 {
    margin-top: 0;
    margin-bottom: 12px;
}

متن:

.card p {
    margin-bottom: 20px;
}

لینک:

.card a {
    display: inline-block;
    padding: 10px 16px;
    background-color: #222;
    color: white;
    text-decoration: none;
}

در این مثال از چند مفهوم قبلی نیز استفاده کردیم:

• رنگ‌ها

• فونت‌ها

• Text

• Padding

• Margin

• Border

• Width

• Box Sizing

تفاوت فاصله داخلی و خارجی در یک مثال واقعی

فرض کنید یک کارت داریم:

.card {
    padding: 20px;
    margin: 30px;
}

اگر کارت این باشد:

             Margin
        ←──────────────→

      ┌───────────────────┐
      │      Border       │
      │   ┌───────────┐   │
      │   │  Padding  │   │
      │   │  ┌─────┐  │   │
      │   │  │Text │  │   │
      │   │  └─────┘  │   │
      │   └───────────┘   │
      └───────────────────┘

می‌توانیم بگوییم:

Padding: «محتوای من را از لبه‌های خودم دور کن.»

Margin: «من را از عناصر اطرافم دور کن.»

این یکی از ساده‌ترین روش‌ها برای به خاطر سپردن تفاوت این دو ویژگی است.

استفاده از Box Model در طراحی کارت‌های سایت

تقریباً در هر سایت واقعی با کارت‌ها مواجه می‌شوید:

• کارت محصول

• کارت مقاله

• کارت دوره آموزشی

• کارت کاربر

• کارت قیمت

• کارت خدمات

• کارت خبر

مثلاً:

<div class="product-card">
    <h2>سرور مجازی</h2>

    <p>
        سرور مجازی با منابع اختصاصی و پایدار.
    </p>

    <strong>شروع قیمت: 750 هزار تومان</strong>
</div>

CSS:

.product-card {
    width: 320px;
    box-sizing: border-box;

    padding: 24px;

    margin: 20px;

    border: 1px solid #ddd;

    background-color: #fff;
}

در آینده با Flexbox و Grid یاد می‌گیریم چگونه چندین کارت را کنار هم قرار دهیم و یک Layout حرفه‌ای بسازیم.

چگونه مشکلات Box Model را پیدا کنیم؟

گاهی یک عنصر آن‌طور که انتظار داریم نمایش داده نمی‌شود.

مثلاً:

.box {
    width: 100%;
    padding: 20px;
    border: 2px solid black;
}

ممکن است متوجه شوید عنصر از عرض والد خود بزرگ‌تر شده است.

یکی از اولین چیزهایی که باید بررسی کنید box-sizing است:

.box {
    box-sizing: border-box;
}

همچنین می‌توانید از ابزارهای Developer Tools مرورگر استفاده کنید.

در مرورگر:

Right Click
      ↓
Inspect
      ↓
Elements

معمولاً در بخش مربوط به Box Model می‌توانید مقدارهای:

Margin
Border
Padding
Content

را مشاهده کنید.

این ابزار یکی از بهترین روش‌ها برای درک واقعی Box Model هنگام طراحی صفحات است.

اشتباهات رایج در Box Model

1. اشتباه گرفتن Margin و Padding

اشتباه:

برای ایجاد فاصله متن از لبه کارت از Margin خود کارت استفاده کنیم.

در چنین شرایطی معمولاً padding انتخاب مناسب‌تری است.

2. فراموش کردن Border در محاسبه اندازه

مثلاً:

.box {
    width: 300px;
    border: 10px solid black;
}

در content-box، عرض نهایی 300 پیکسل نخواهد بود.

3. استفاده نکردن از box-sizing در Layoutهای حساس

در طراحی‌هایی که اندازه عناصر باید دقیق باشد، border-box می‌تواند مدیریت اندازه را بسیار ساده‌تر کند.

4. حذف Outline بدون جایگزین

این کد:

button {
    outline: none;
}

می‌تواند تجربه کاربرانی را که با صفحه‌کلید کار می‌کنند، ضعیف کند.

اگر Focus را حذف می‌کنید، باید یک حالت Focus مناسب جایگزین کنید.

مثلاً:

button:focus-visible {
    outline: 3px solid blue;
}

5. استفاده بیش از حد از Margin

گاهی به جای اینکه ساختار داخلی یک عنصر را با Padding درست کنیم، Marginهای مختلف روی عناصر داخلی قرار می‌دهیم.

قبل از اضافه کردن Margin، از خودتان بپرسید:

آیا می‌خواهم فاصله داخل این عنصر باشد یا خارج آن؟

تمرین‌های مقاله

تمرین ۱ — Box Model

یک div بسازید:

<div class="box">
    این یک جعبه است.
</div>

و برای آن موارد زیر را تعیین کنید:

width: 300px
padding: 20px
border: 5px solid
margin: 30px

سپس محاسبه کنید در حالت content-box عرض نهایی چند پیکسل خواهد بود.

تمرین ۲ — Padding

یک کارت بسازید و مقدار Padding آن را تغییر دهید:

.card {
    padding: 10px;
}

سپس امتحان کنید:

padding: 30px;

و تفاوت را مشاهده کنید.

تمرین ۳ — Margin

دو کارت زیر هم بسازید:

<div class="card">کارت اول</div>
<div class="card">کارت دوم</div>

و برای آن‌ها Margin ایجاد کنید.

مثلاً:

.card {
    margin-bottom: 20px;
}

تمرین ۴ — Border

چند نوع Border مختلف امتحان کنید:

border: 2px solid black;

border: 2px dashed black;

border: 3px dotted black;

border: 5px double black;

تفاوت ظاهری آن‌ها را بررسی کنید.

تمرین ۵ — Box Sizing

دو عنصر با مشخصات یکسان بسازید:

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

یکی را با:

box-sizing: content-box;

و دیگری را با:

box-sizing: border-box;

نمایش دهید.

سپس اندازه واقعی هر دو را با Developer Tools بررسی کنید.

جمع‌بندی

Box Model یکی از پایه‌ای‌ترین مفاهیم CSS است و تقریباً در تمام طراحی‌های وب با آن سروکار خواهید داشت.

هر عنصر را می‌توان به چهار بخش اصلی تقسیم کرد:

Content
   ↓
Padding
   ↓
Border
   ↓
Margin

Content محتوای اصلی عنصر است.

Padding فاصله بین محتوا و Border است.

Border حاشیه اطراف Padding و Content است.

Margin فاصله بیرونی عنصر با عناصر اطراف است.

همچنین box-sizing مشخص می‌کند width و height چگونه در محاسبه اندازه عنصر در نظر گرفته شوند. مقدار border-box در بسیاری از Layoutها باعث می‌شود کنترل اندازه عناصر ساده‌تر و قابل پیش‌بینی‌تر باشد.

اگر Box Model را به‌خوبی یاد بگیرید، بسیاری از مشکلاتی که هنگام طراحی صفحات با CSS با آن‌ها مواجه می‌شوید، بسیار ساده‌تر قابل حل خواهند بود.