Margin در CSS برای ایجاد فاصله بین عناصر استفاده می‌شود. این ویژگی یکی از اجزای اصلی Box Model است و به ما کمک می‌کند چیدمان عناصر در صفحه را مدیریت کنیم.

درک صحیح نحوه کار با Margin در CSS باعث بهبود طراحی و افزایش خوانایی صفحات وب می‌شود.

۱. Margin در CSS چیست؟

Margin فاصله‌ای است که خارج از حاشیه (Border) یک عنصر قرار دارد و تعیین می‌کند که چقدر یک عنصر از عناصر مجاور خود فاصله داشته باشد. برخلاف padding که فاصله داخلی را تنظیم می‌کند، margin فاصله بین عناصر را تنظیم می‌کند.

۲. نحوه استفاده از Margin در CSS

✅ ۱. تعیین مقدار Margin به‌صورت یکسان برای همه جهات

.box {
    margin: 20px;
}

🔹 نتیجه: فاصله ۲۰ پیکسلی از تمام جهات (بالا، پایین، چپ، راست) اعمال می‌شود.

✅ ۲. تعیین Margin برای هر سمت به‌صورت جداگانه

.box {
    margin-top: 10px;    /* فاصله از بالا */
    margin-right: 15px;  /* فاصله از راست */
    margin-bottom: 20px; /* فاصله از پایین */
    margin-left: 25px;   /* فاصله از چپ */
}

🔹 نتیجه: مقدار Margin در هر جهت متفاوت خواهد بود.

✅ ۳. استفاده از Margin به‌صورت خلاصه‌نویسی

🔹 می‌توان margin را با مقادیر خلاصه تنظیم کرد:

.box {
    margin: 10px 20px 30px 40px;
}

🔹 ترتیب مقادیر:
margin: بالا راست پایین چپ;

🔹 مثال‌های دیگر:

margin: 20px;           /* همه جهات 20px */
margin: 10px 20px;      /* بالا و پایین 10px، چپ و راست 20px */
margin: 10px 20px 30px; /* بالا 10px، چپ و راست 20px، پایین 30px */

✅ ۴. مقدار auto برای Margin (مرکز چین کردن عناصر)

برای مرکز چین کردن یک عنصر به‌صورت افقی، می‌توان مقدار auto را برای margin-left و margin-right تنظیم کرد.

.box {
    width: 300px;
    margin: 0 auto;
}

🔹 نتیجه: عنصر با عرض ۳۰۰ پیکسل در مرکز صفحه قرار می‌گیرد.

✅ ۵. مقدار inherit برای Margin

با استفاده از مقدار inherit، یک عنصر می‌تواند مقدار Margin را از عنصر والد خود به ارث ببرد.

.box {
    margin: inherit;
}

🔹 نتیجه: مقدار margin همان مقدار عنصر والد خواهد بود.

۳. مقداردهی خاص به Margin در CSS

✅ ۱. استفاده از واحدهای مختلف برای Margin

margin: 20px;   /* پیکسل */
margin: 2em;    /* بر اساس اندازه فونت */
margin: 5%;     /* درصدی از عرض والد */
margin: 1rem;   /* بر اساس اندازه فونت ریشه */

🔹 تفاوت:

• px مقدار ثابت است.
• em و rem نسبت به اندازه فونت تغییر می‌کنند.
• % وابسته به اندازه عنصر والد است.

✅ ۲. مقدار منفی برای Margin

برخلاف padding، می‌توان برای margin مقدار منفی تعیین کرد تا عنصر نزدیک‌تر از حد معمول به عناصر دیگر قرار بگیرد.

.box {
    margin-top: -10px;
}

🔹 نتیجه: عنصر ۱۰ پیکسل به سمت بالا جابجا می‌شود.

۴. هم‌پوشانی Margin‌ها (Margin Collapse)

زمانی که دو عنصر دارای margin در جهات مشابه باشند، مقدار بزرگ‌تر اعمال می‌شود، نه مجموع دو مقدار.

🔹 مثال:

.div1 {
    margin-bottom: 30px;
}
.div2 {
    margin-top: 20px;
}

🔹 نتیجه: فاصله نهایی بین دو عنصر ۳۰ پیکسل خواهد بود، نه ۵۰ پیکسل!

۵. تفاوت Margin و Padding در CSS

۶. کاربردهای مهم Margin در طراحی وب

✅ تنظیم فاصله بین عناصر – برای جلوگیری از چسبیدن عناصر به یکدیگر.
✅ مرکز چین کردن عناصر – با استفاده از margin: auto;.
✅ ایجاد فضای مناسب در طراحی ریسپانسیو – برای سازگاری بهتر با صفحه‌نمایش‌های مختلف.
✅ ایجاد فاصله‌ی مناسب بین متن و تصاویر – افزایش خوانایی محتوا.

۷. مثال‌های کاربردی برای استفاده از Margin

✅ ۱. تنظیم فاصله بین دکمه‌ها

.button {
    padding: 10px 20px;
    margin: 10px;
    background-color: blue;
    color: white;
    border: none;
    cursor: pointer;
}

🔹 نتیجه: بین دکمه‌ها فاصله ۱۰ پیکسلی ایجاد می‌شود.

✅ ۲. ایجاد فاصله بین کارت‌های محتوا

.card {
    width: 300px;
    margin: 20px;
    padding: 15px;
    border: 1px solid gray;
    background-color: #f9f9f9;
}

🔹 نتیجه: هر کارت دارای ۲۰ پیکسل فاصله از کارت‌های دیگر خواهد بود.

۸. نتیجه‌گیری

✅ Margin در CSS برای ایجاد فاصله بین عناصر استفاده می‌شود.
✅ می‌توان مقدار margin را برای هر طرف به‌صورت جداگانه یا خلاصه تنظیم کرد.
✅ مقدار auto برای مرکز چین کردن عناصر کاربرد دارد.
✅ مقدار منفی برای margin باعث جابجایی عناصر به هم نزدیک‌تر می‌شود.
✅ Margin و Padding هر دو فاصله ایجاد می‌کنند، اما margin بین عناصر و padding داخل عناصر عمل می‌کند.