تعریف

ویژگی Margin در CSS برای تعیین فاصله‌ی خارجی (Outer Space) بین یک عنصر HTML و عناصر اطرافش استفاده می‌شود.
به عبارت ساده: Margin فاصله بیرونی عنصر از محیط اطرافشه (برخلاف Padding که فاصله‌ی داخلی از محتوا تا مرز هست).

✨ نحوه مقداردهی Margin

ویژگی margin می‌تواند به چند روش مقدار بگیرد:

1. مقدار تکی (یک مقدار)

همه طرف‌ها یک مقدار خواهند داشت.

div {
  margin: 20px;  /* بالا، راست، پایین، چپ */
}

2. دو مقدار (بالا/پایین – راست/چپ)

• مقدار اول: بالا و پایین

• مقدار دوم: راست و چپ

div {
  margin: 10px 30px;  /* بالا/پایین: 10px - راست/چپ: 30px */
}

3. سه مقدار

• مقدار اول: بالا

• مقدار دوم: راست و چپ

• مقدار سوم: پایین

div {
  margin: 5px 15px 25px;
  /* بالا: 5px - راست/چپ: 15px - پایین: 25px */
}

4. چهار مقدار

• مقدار اول: بالا

• مقدار دوم: راست

• مقدار سوم: پایین

• مقدار چهارم: چپ

div {
  margin: 10px 20px 30px 40px;
  /* بالا:10 - راست:20 - پایین:30 - چپ:40 */
}

✨ ویژگی‌های خاص

🔹 margin-top

فاصله بیرونی بالای عنصر را مشخص می‌کند.

h1 {
  margin-top: 50px;
}

🔹 margin-right

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

h1 {
  margin-right: 20px;
}

🔹 margin-bottom

فاصله بیرونی پایین عنصر.

h1 {
  margin-bottom: 15px;
}

🔹 margin-left

فاصله بیرونی سمت چپ عنصر.

h1 {
  margin-left: 40px;
}

✨ مقدار auto

مقدار auto برای قرار دادن عنصر در مرکز افقی استفاده می‌شود (معمولاً همراه با width).

div {
  width: 300px;
  margin: 0 auto; /* وسط‌چین شدن افقی */
}

📌 نکته حرفه‌ای: Margin Collapse

وقتی دو المان بلاک پشت سر هم قرار بگیرند (مثل دو

)، margin پایین عنصر اول و margin بالای عنصر دوم روی هم نمی‌آیند؛ بلکه مرورگر مقدار بزرگ‌تر رو انتخاب می‌کنه. به این حالت می‌گن Margin Collapse.