تو CSS، padding فاصله داخلی یه عنصر رو تنظیم می‌کنه و بین محتوا و لبه جعبه قرار می‌گیره، مثل فضای دور متن تو دکمه، که تو پس‌زمینه هم دیده می‌شه. Margin فاصله خارجیه و عنصر رو از بقیه جدا می‌کنه، بدون اینکه جزو جعبه باشه یا رو رنگ اثر بذاره. تو یه مثال، با padding دکمه رو بازتر کردیم و با margin پاراگراف رو ازش دور کردیم. دست به کد بزن و با این دو، فاصله‌ها رو تو سایتت مثل حرفه‌ای‌ها تنظیم کن!

 

اگه تازه با CSS کار می‌کنی، احتمالاً اسم margin و padding رو شنیدی و شاید گیج شدی که این دوتا چه فرقی دارن. هر دو فاصله رو تو طراحی سایت کنترل می‌کنن، ولی کجا و چطور استفاده می‌شن؟ تو این مقاله قراره این دوتا رو کامل بشناسی، ببینی چه تاثیری رو سایتت دارن و با مثال دست به کد بزنی تا فرقشون برات روشن بشه. آماده‌ای؟ بریم سراغش!

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

قبل از اینکه بریم سراغ margin و padding، باید یه مفهوم مهم رو بفهمی: مدل جعبه. تو CSS، هر عنصر (مثل یه پاراگراف یا دکمه) یه جعبه‌ست که از این بخش‌ها تشکیل شده:

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

Margin و padding دو تا از این لایه‌ها هستن و کارشون تنظیم فاصله‌ست، ولی هر کدوم جای خودش رو دارن.

Padding چیه؟

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

مثال ساده:

button {
    padding: 10px;
    background-color: lightblue;
    border: 1px solid black;
}

اینجا دکمه ۱۰ پیکسل فاصله داخلی داره و متنش از لبه‌ها دورتره. رنگ lightblue هم تا لبه داخلی (شامل padding) پخش می‌شه.

Margin چیه؟

Margin فاصله خارجی جعبه‌ست؛ یعنی فضای بیرون عنصر که فاصله‌ش رو با عناصر دیگه تنظیم می‌کنه. برخلاف padding، این فاصله جزو خود عنصر حساب نمی‌شه و تو پس‌زمینه یا حاشیه اثر نمی‌ذاره. بیشتر برای جدا کردن عناصر از هم استفاده می‌شه.

مثال:

div {
    margin: 20px;
    background-color: lightgreen;
}

اینجا <div> از همه طرف ۲۰ پیکسل با بقیه چیزا فاصله می‌گیره، ولی رنگ lightgreen فقط تو خود جعبه می‌مونه و به margin نمی‌رسه.

فرق اصلیشون چیه؟

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

چطور مقدار بذاریم؟

هر دو رو می‌تونی با واحدها مثل px، % یا em تنظیم کنی. یه روش کامل برای نوشتنشون اینه:

padding: 10px 20px 30px 40px; /* بالا، راست، پایین، چپ */
margin: 15px 25px; /* بالا/پایین، چپ/راست */
یا می‌تونی جدا جدا بنویسی:
padding-top: 10px;
margin-left: 20px;

یه مثال عملی: دکمه و پاراگراف

بیایم با یه مثال ببینیم اینا چطور کار می‌کنن.

HTML:
<!DOCTYPE html>
<html>
<head>
    <title>تست Margin و Padding</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <button>کلیک کن</button>
    <p>این یه پاراگرافه.</p>
</body>
</html>
CSS (فایل styles.css):
button {
    padding: 15px 30px; /* فاصله داخلی: بالا/پایین 15px، چپ/راست 30px */
    background-color: #4CAF50;
    color: white;
    border: none;
}

p {
    margin: 20px; /* فاصله خارجی: 20px از همه طرف */
    padding: 10px; /* فاصله داخلی: 10px */
    background-color: lightgray;
}

فایل رو تو مرورگر باز کن. دکمه یه فضای داخلی راحت داره (متن از لبه‌ها فاصله گرفته) و پاراگراف هم از دکمه ۲۰ پیکسل فاصله داره. padding تو دکمه باعث شده متنش وسط بشینه و margin پاراگراف رو از دکمه جدا کرده.

کی از کدوم استفاده کنیم؟

  • Padding: وقتی می‌خوای محتوا تو عنصر نفس بکشه یا از لبه‌ها فاصله بگیره (مثل دکمه‌ها، کارت‌ها).
  • Margin: وقتی می‌خوای فاصله بین عناصر رو تنظیم کنی (مثل فاصله بین پاراگراف‌ها یا بخش‌ها).

مثال کاربرد:

  • دکمه با padding بزرگ‌تر و خوش‌دست می‌شه.
  • دو <div> با margin از هم جدا می‌مونن.

مشکلات رایج و راه‌حل‌ها

  1. فاصله‌ها بیشتر از چیزی که فکر می‌کنی: گاهی marginها با هم جمع می‌شن (Margin Collapse). مثلاً اگه دو پاراگراف پشت هم margin: 20px داشته باشن، فاصله‌شون ۲۰ پیکسل می‌شه، نه ۴۰. برای کنترلش از padding یا چیدمان دیگه (مثل فلکس‌باکس) استفاده کن.
  2. عنصر جا نمی‌گیره: اگه padding زیاد بدی و عرض ثابت باشه، ممکنه از جعبه بزنه بیرون. عرض رو با box-sizing: border-box تنظیم کن:
* {
    box-sizing: border-box;
}
  1. نمی‌دونی چی به چیه: تو DevTools (F12) عنصر رو Inspect کن و فاصله‌ها رو زنده ببین.

یه پروژه عملی: کارت با فاصله‌های درست

بیایم یه کارت بسازیم که margin و padding رو قشنگ نشون بده.

HTML:
<!DOCTYPE html>
<html>
<head>
    <title>کارت با CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="card">
        <h2>عنوان کارت</h2>
        <p>این یه توضیح کوتاهه.</p>
    </div>
</body>
</html>
CSS:
.card {
    width: 300px;
    margin: 30px auto; /* وسط صفحه با 30px فاصله از بالا/پایین */
    padding: 20px; /* فضای داخلی کارت */
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    text-align: center;
}

h2 {
    margin: 0 0 10px 0; /* فاصله پایین تیتر */
    padding: 5px;
    background-color: #e0e0e0;
}

p {
    margin: 0; /* حذف فاصله پیش‌فرض پاراگراف */
}

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

ترفندهای سریع

  • اتوماتیک وسط کن: margin: 0 auto برای عناصر با عرض ثابت.
  • فاصله منفی: با margin: -10px می‌تونی عناصر رو به هم نزدیک‌تر کنی.
  • تنظیم همه‌جانبه: padding: 10px یعنی ۱۰ پیکسل از هر طرف.

قدم بعدی چیه؟

حالا که margin و padding رو شناختی، می‌تونی:

  • با فلکس‌باکس و گرید چیدمان رو بهتر کنی.
  • انیمیشن به فاصله‌ها اضافه کنی.
  • پروژه‌های پیچیده‌تر بسازی.

حرف آخر

Margin و padding مثل دو تا دوست تو CSS هستن که هر کدوم جای خودش رو دارن. با تمرین اینا، می‌تونی فاصله‌ها رو تو سایتت مثل یه حرفه‌ای کنترل کنی. دست به کد بزن، این مثال‌ها رو تست کن و اگه سوالی داشتی، تو کامنت‌های "دست به کد" بپرس. تو مقاله‌های بعدی، بیشتر وارد چیدمان و استایل‌های پیشرفته می‌شیم!