Content، Padding، Border، Margin

چهار لایه‌ای که هر عنصر را می‌سازند: Content، Padding، Border و Margin

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

هر عنصر، یک جعبه است

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

لایه اول: Content

Content (محتوا) درونی‌ترین بخش جعبه‌ست؛ جایی که متن، تصویر یا هر عنصر فرزند دیگه‌ای واقعاً نمایش داده می‌شه. اندازه این بخش با Propertyهای width و height کنترل می‌شه.

.box {
  width: 300px;
  height: 150px;
  background-color: #e0f7fa;
}

<div class="box">این محتوای داخل جعبه است.</div>

در این مثال، ناحیه‌ای که رنگ #e0f7fa رو می‌گیره، دقیقاً همون ناحیه Content است؛ یعنی ۳۰۰ در ۱۵۰ پیکسل.

لایه دوم: Padding

Padding (فاصله داخلی) فضایی‌ست بین Content و Border؛ یعنی یه حاشیه داخلی که Content رو از لبه جعبه دور نگه می‌داره.

.box {
  width: 300px;
  padding: 20px;
  background-color: #e0f7fa;
}

این Rule یه فاصله ۲۰ پیکسلی از هر چهار طرف، بین محتوا و لبه جعبه ایجاد می‌کنه. نکته مهم: پس‌زمینه یک عنصر، ناحیه Padding رو هم پوشش می‌ده؛ یعنی رنگ #e0f7fa هم روی Content و هم روی Padding دیده می‌شه.

تعریف Padding برای هر جهت به‌صورت جدا

.box {
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 15px;
}

این چهار Property امکان تنظیم دقیق فاصله در هر جهت رو به‌صورت مستقل فراهم می‌کنن.

شورت‌هند Padding

.box-a {
  padding: 10px;
}

.box-b {
  padding: 10px 20px;
}

.box-c {
  padding: 10px 20px 15px 25px;
}

برای .box-a، مقدار ۱۰ پیکسل به هر چهار طرف اعمال می‌شه. برای .box-b، مقدار اول (۱۰px) به بالا و پایین، و مقدار دوم (۲۰px) به چپ و راست اعمال می‌شه. برای .box-c، هر چهار مقدار به‌ترتیب ساعت‌گرد از بالا شروع می‌شن: بالا، راست، پایین، چپ.

لایه سوم: Border

Border (حاشیه یا کادر) خط دور جعبه‌ست که دقیقاً بین Padding و Margin قرار می‌گیره.

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

شورت‌هند border از سه بخش تشکیل شده: ضخامت (2px)، نوع خط (solid) و رنگ (#00838f). هرکدوم از این سه بخش رو می‌شه جداگانه هم تنظیم کرد:

.box {
  border-width: 2px;
  border-style: solid;
  border-color: #00838f;
}

Border در جهت‌های مختلف

.box {
  border-top: 3px solid crimson;
  border-bottom: 1px dashed gray;
}

دقیقاً مثل Padding، می‌شه Border رو هم فقط برای یک جهت خاص تعریف کرد؛ این تکنیک برای طراحی‌هایی مثل خط جداکننده زیر تیترها خیلی رایجه.

لایه چهارم: Margin

Margin (فاصله بیرونی) بیرونی‌ترین لایه جعبه‌ست؛ فضایی که بین لبه بیرونی Border یک عنصر و عناصر مجاورش قرار می‌گیره.

.box {
  width: 300px;
  padding: 20px;
  border: 2px solid #00838f;
  margin: 30px;
}

این Rule یک فاصله ۳۰ پیکسلی بین این جعبه و هر عنصر مجاور دیگه ایجاد می‌کنه. برخلاف Padding، Margin هیچ پس‌زمینه‌ای نمی‌گیره؛ یعنی کاملاً شفافه و فقط فضای خالی ایجاد می‌کنه.

شورت‌هند و جهت‌های Margin

.box {
  margin: 10px 20px 15px 25px; /* بالا، راست، پایین، چپ */
}

.box-alt {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 15px;
  margin-left: 25px;
}

الگوی شورت‌هند و جهت‌های جداگانه، دقیقاً مشابه همون چیزیه که برای Padding دیدیم.

مقدار auto در Margin

.centered {
  width: 400px;
  margin: 0 auto;
}

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

نمایش هر چهار لایه در یک مثال کامل

.card {
  width: 250px;
  padding: 16px;
  border: 1px solid #cccccc;
  margin: 24px;
  background-color: #fafafa;
}

<div class="card">این یک کارت نمونه است.</div>
<div class="card">این کارت دوم است.</div>

در این مثال: width: 250px اندازه Content رو مشخص می‌کنه، padding: 16px فاصله داخلی بین متن و لبه، border یک خط نازک دور جعبه، و margin: 24px فاصله بین این دو کارت مجاور رو ایجاد می‌کنه.

ترتیب لایه‌ها از داخل به بیرون

Margin
  Border
    Padding
      Content

این ترتیب همیشه ثابته: هرچی از Content دورتر بشیم، به لایه بعدی می‌رسیم. درک این ترتیب، پایه‌ی فهمیدن اینه که چرا اندازه واقعی یک عنصر روی صفحه، معمولاً بیشتر از فقط width و height تعریف‌شده‌ست؛ موضوعی که در درس بعدی همین فصل (Width، Height و box-sizing) با جزئیات کامل بررسیش می‌کنیم.

نکات مهم

• Padding داخل رنگ پس‌زمینه عنصر قرار می‌گیره؛ Margin همیشه شفاف و بیرون از پس‌زمینه است.
• هر چهار Property (padding، border، margin) از یک الگوی شورت‌هند مشترک با ترتیب بالا-راست-پایین-چپ پیروی می‌کنن.
• margin: auto روش رایج و استاندارد برای وسط‌چین کردن افقی عناصر با عرض مشخصه.

اشتباهات رایج

• قاطی کردن Padding و Margin؛ اولی فضای داخلی (با پس‌زمینه)، دومی فضای بیرونی (بدون پس‌زمینه) است.
• فراموش کردن اینکه شورت‌هند سه یا چهار مقداری، ترتیب مشخص و ثابتی داره (ساعت‌گرد از بالا).
• استفاده از margin برای ایجاد فاصله داخلی، در حالی که Property مناسب برای این کار padding است.

جمع‌بندی

هر عنصر HTML از چهار لایه تشکیل شده: Content (محتوای اصلی)، Padding (فاصله داخلی بین محتوا و حاشیه)، Border (خط دور جعبه) و Margin (فاصله بیرونی بین عنصر و همسایه‌هاش). این چهار لایه با هم Box Model رو می‌سازن که پایه‌ی تمام محاسبات چیدمان در CSS محسوب می‌شه.