جعبه‌ها: box model

در این فصل چه می‌سازی#

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

آخر این فصل می‌توانی:

• چهار لایهٔ هر جعبه — content، padding، border و margin — را بشناسی و از هم جدا کنی
• با padding فاصلهٔ داخلی و با margin فاصلهٔ بیرونی بسازی
• برای یک جعبه width و height تعیین کنی
• بفهمی چرا یک جعبه از width ای که دادی پهن‌تر می‌شود، و با box-sizing درستش کنی

قبل از شروع#

• از فصل ۱: <link rel="stylesheet">، color و background-color — رنگ پس‌زمینه را دیدنِ جعبه‌ها را راحت می‌کند.
• از فصل ۲: class و selector آن (.card) — به هر جعبه با کلاسش استایل می‌دهیم.

مثل همیشه فقط یک مرورگر لازم داری، یا فقط همین آزمایشگاه.

۱. هر عنصر یک جعبه است#

مرورگر برای هر عنصری روی صفحه — چه یک <p>، چه یک <img>، چه یک <article> — یک جعبهٔ چهارگوش می‌سازد. حتی اگر گوشه‌هایش را نبینی، آن جعبه آنجاست. تمام کارِ فاصله‌دادن و اندازه‌دادن در CSS، در واقع کار با این جعبه‌هاست.

هر جعبه چهار لایه دارد، از درون به بیرون:

• content — خودِ محتوا: متن، تصویر، هرچه داخل عنصر است.
• padding — فاصلهٔ داخلی: فضایی بین محتوا و لبهٔ جعبه. مثل حاشیهٔ سفیدِ داخلِ یک قاب عکس.
• border — خط دورِ جعبه: قابی که دور padding و content کشیده می‌شود.
• margin — فاصلهٔ بیرونی: فضایی بین این جعبه و جعبه‌های دیگر.

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

<article class="card">
  <h2>سارا رضایی</h2>
  <p>طراح وب و عاشق قهوه.</p>
</article>

و در CSS اول به کل صفحه یک پس‌زمینهٔ ملایم بده تا جعبهٔ سفیدِ کارت رویش پیدا باشد، بعد خودِ کارت را سفید کن:

body {
  background-color: #f6edda;
}

.card {
  background-color: #ffffff;
}

✅ چک کن: روی زمینهٔ کِرِمِ صفحه یک مستطیل سفید می‌بینی که تا کل عرض کشیده شده و متن، چسبیده به لبه‌اش نشسته است. همین چسبیدنِ متن به لبه، چیزی است که در قدم بعد درستش می‌کنیم.

۲. padding: فاصلهٔ داخلی#

متن که به لبهٔ جعبه چسبیده باشد، ناخوانا و شلوغ به‌نظر می‌رسد. padding این را حل می‌کند: فضایی از داخل بین محتوا و لبهٔ جعبه باز می‌کند. به کارت padding اضافه کن:

.card {
  background-color: #ffffff;
  padding: 24px;
}

مقدارها را با واحد px نوشتیم. px یعنی «پیکسل»، یک نقطهٔ ریز روی صفحه؛ 24px یعنی ۲۴ نقطه. فعلاً همین‌قدر بدان و راحت استفاده کن؛ فصل ۵ کامل سراغ واحدها می‌رویم و می‌بینی چرا گاهی px بهترین انتخاب نیست.

✅ چک کن: حالا دور تا دورِ متن، ۲۴ پیکسل فضای خالی باز شده و متن از لبه فاصله گرفته. چون این فضا داخلِ جعبه است، رنگ پس‌زمینهٔ سفید هم آن را پر کرده. عدد 24px را به 4px عوض کن و ببین چطور متن دوباره به لبه نزدیک می‌شود؛ بعد 48px بگذار و ببین چطور جا باز می‌کند. همین است padding.

💡 نکته: می‌توانی برای هر طرف یک مقدار جدا بدهی: padding: 24px 12px یعنی بالا و پایین ۲۴، چپ و راست ۱۲. یک مقدارِ تنها یعنی هر چهار طرف یکی.

۳. border: خطِ دورِ جعبه#

border یک خط دورِ جعبه می‌کشد — درست روی مرزِ بیرونیِ padding. سه چیز را با هم تعیین می‌کند: کلفتی خط، شکلش، و رنگش. به کارت یک border بده:

.card {
  background-color: #ffffff;
  padding: 24px;
  border: 4px solid #2a6b93;
}

4px کلفتیِ خط است، solid یعنی خطِ توپُر (نه نقطه‌چین)، و #2a6b93 رنگش. حالا یک قابِ آبیِ ۴ پیکسلی دور کارت می‌بینی.

✅ چک کن: یک قاب آبی دور کل کارت ظاهر شده. solid را به dashed عوض کن تا خط نقطه‌چین شود، بعد برش گردان. رنگ و کلفتی را هم عوض کن و اثرش را ببین. border دقیقاً بین padding و margin می‌نشیند — یعنی لایهٔ سومِ جعبه.

۴. margin: فاصلهٔ بیرونی#

تا اینجا کارت به لبه‌های صفحه چسبیده است. margin فضایی از بیرونِ جعبه باز می‌کند — بین این جعبه و هر چیزِ دیگر، از جمله لبهٔ صفحه. فرقش با padding مهم است: padding فضای داخل قاب است (پس‌زمینه دارد)، margin فضای بیرون قاب است (خالی و بی‌رنگ).

.card {
  background-color: #ffffff;
  padding: 24px;
  border: 4px solid #2a6b93;
  margin: 32px;
}

✅ چک کن: حالا کارت ۳۲ پیکسل از لبه‌های صفحه فاصله گرفته. دقت کن که این فاصله بی‌رنگ است — رنگ سفیدِ کارت داخلش نیامده، چون margin بیرون جعبه است. همین یک نگاه، فرق padding و margin را برایت جا می‌اندازد: padding رنگ می‌گیرد، margin نه.

⚠️ مواظب باش: padding و margin را با هم قاطی نکن. یک اشتباه رایج این است که برای فاصله‌گرفتنِ متن از لبهٔ خودش به‌جای padding از margin استفاده کنی — margin کل جعبه را جابه‌جا می‌کند ولی متن باز به لبه چسبیده می‌ماند. قاعده: فضای داخلِ قاب → padding؛ فضای بیرونِ قاب → margin.

۵. width و height — و یک جعبه که پهن‌تر از حرفش شد#

در قدم قبل به کارت margin دادیم؛ حالا آن را برمی‌داریم، چون می‌خواهیم کارت و یک خط‌کش هر دو از همان لبهٔ صفحه شروع شوند تا بشود پهنایشان را مقایسه کرد. با width می‌گویی جعبه چقدر پهن باشد، و با height چقدر بلند. بیا کارت را دقیقاً ۳۲۰ پیکسل پهن کنیم، و برای اینکه ببینیم واقعاً ۳۲۰ می‌شود یا نه، یک «خط‌کش» بالایش بگذاریم: یک نوارِ باریک که آن هم دقیقاً ۳۲۰ پیکسل است.

اول در HTML، بالای کارت این نوار را اضافه کن:

<div class="ruler"></div>

<article class="card">
  <h2>سارا رضایی</h2>
  <p>طراح وب و عاشق قهوه.</p>
</article>

بعد در CSS به هر دو width: 320px بده:

.ruler {
  width: 320px;
  height: 8px;
  background-color: #bc3e1c;
  margin-bottom: 16px;
}

.card {
  width: 320px;
  padding: 24px;
  border: 4px solid #2a6b93;
  background-color: #ffffff;
}

انتظار داری کارت و خط‌کش هم‌عرض باشند — هر دو که 320px هستند. ولی نگاه کن: کارت از خط‌کش پهن‌تر است و از زیرش بیرون زده.

🔧 اگر کار نکرد: بله، این عمدی است و باید همین را ببینی. کارتی که width: 320px دادی، روی صفحه ۳۷۶ پیکسل پهن شده! دلیلش این است: به‌طور پیش‌فرض، width فقط اندازهٔ content را تعیین می‌کند، نه کل جعبه را. مرورگر بعد padding (۲۴ از هر طرف = ۴۸) و border (۴ از هر طرف = ۸) را روی آن اضافه می‌کند: ۳۲۰ + ۴۸ + ۸ = ۳۷۶. پس جعبه از حرفی که زدی پهن‌تر شد. این همان چیزی است که تازه‌کارها را دیوانه می‌کند: «۳۲۰ گفتم، چرا ۳۷۶ شد؟»

راهِ حل یک خط است. به مرورگر بگو «width را کلِ جعبه حساب کن، نه فقط محتوا را». این کار با box-sizing: border-box انجام می‌شود. یک قاعدهٔ جدید بالای فایل اضافه کن:

* {
  box-sizing: border-box;
}

این * یک selector سراسری است: به هر عنصرِ صفحه می‌خورد. اینجا برای اولین بار می‌بینی‌اش و همین‌جا ازش استفاده می‌کنیم تا این قاعده روی همهٔ جعبه‌ها اعمال شود.

✅ چک کن: حالا کارت دقیقاً هم‌عرضِ خط‌کش است — هر دو ۳۲۰ پیکسل. با border-box، آن ۳۲۰ دیگر کلِ جعبه است: مرورگر padding و border را از داخلِ همین ۳۲۰ برمی‌دارد، نه اینکه رویش اضافه کند. عدد 4px بوردر را به 12px عوض کن و ببین کارت باز هم ۳۲۰ می‌ماند و از خط‌کش رد نمی‌شود. این تفاوتِ border-box است.

۶. یک عادتِ همیشگی#

آن قاعدهٔ * { box-sizing: border-box; } را تقریباً هر سایتِ حرفه‌ای در همان اولِ CSS اش می‌گذارد و دیگر دستش نمی‌زند. چون content-boxِ پیش‌فرض — که padding و border را روی width اضافه می‌کند — تقریباً هیچ‌وقت آن چیزی نیست که آدم می‌خواهد. با border-box، هر وقت width: 320px بنویسی، جعبه واقعاً ۳۲۰ می‌شود، هرچقدر هم padding و border داشته باشد. یک بار بنویس، تا آخر خیالت راحت.

🤖 با AI: از دستیار AI ات بپرس «فرق content-box و border-box در box-sizing چیست؟». جوابش را با چیزی که همین الان در آزمایشگاه دیدی بسنج: مقدار border را عوض کن و با هر دو حالت نگاه کن کدام جعبه پهن‌تر می‌شود. تا وقتی خودت با چشمت ندیده‌ای، حرفِ AI فقط یک ادعاست.

کد کاملِ این فصل#

این هم دو فایلِ کامل، یک‌جا. اول index.html:

<!-- index.html -->
<!DOCTYPE html>
<html lang="fa" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <title>کارت پروفایل</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="ruler"></div>

    <article class="card">
      <h2>سارا رضایی</h2>
      <p>طراح وب و عاشق قهوه.</p>
    </article>
  </body>
</html>

و styles.css:

/* styles.css */
* {
  box-sizing: border-box;
}

body {
  background-color: #f6edda;
}

.ruler {
  width: 320px;
  height: 8px;
  background-color: #bc3e1c;
  margin-bottom: 16px;
}

.card {
  width: 320px;
  padding: 24px;
  border: 4px solid #2a6b93;
  background-color: #ffffff;
}

✅ چک کن: روی صفحه یک خط‌کشِ باریکِ قرمز و زیرش یک کارتِ سفیدِ قاب‌دار می‌بینی که هر دو دقیقاً هم‌عرض‌اند. هر لایه سرِ جای خودش است: متن (content)، فضای دور متن (padding)، قابِ آبی (border)، و فاصله تا بقیه (margin).

واژه‌های تازهٔ این فصل#

کلمه	تلفظ به حروف فارسی	یعنی چه
box model	باکس مادِل	این مدل که هر عنصر یک جعبه با چهار لایه است
content	کانتِنت	خودِ محتوای جعبه؛ درونی‌ترین لایه
padding	پَدینگ	فاصلهٔ داخلی، بین محتوا و لبهٔ جعبه
border	بوردِر	خطِ دورِ جعبه، بین padding و margin
margin	مارجین	فاصلهٔ بیرونی، بین این جعبه و جعبه‌های دیگر
width / height	ویدث / هایت	پهنا و بلندیِ جعبه
box-sizing	باکس‌سایزینگ	تعیین می‌کند width فقط محتوا را بشمارد یا کل جعبه را
border-box	بوردِرباکس	حالتی که در آن width کلِ جعبه است، شاملِ padding و border
*	سِتاره	سِلکتورِ سراسری؛ به همهٔ عنصرها می‌خورد
px	پیکسل	واحدِ اندازه؛ یک نقطهٔ ریز روی صفحه

در فصل بعد#

الان می‌دانی هر چیزی یک جعبه است و چهار لایه دارد. تا اینجا همه‌جا از px استفاده کردیم و قول دادیم دربارهٔ واحدها بیشتر بگوییم. فصل بعد دقیقاً همین است: px، %، rem و em — و اینکه چرا برای اندازهٔ فونت rem معمولاً بهترین انتخاب است. کنارش سراغ رنگ می‌رویم و یاد می‌گیری یک رنگ را به چند شکلِ مختلف بنویسی و شفافیت (opacity) بسازی.