فاصله خارجی (Margin)

آشنایی با ویژگی margin در CSS، فاصله بین عناصر، auto برای وسط‌چین کردن و Margin Collapse

فاصله خارجی (Margin) چیست؟

Margin فضای خارجی اطراف یک عنصر است — فاصله‌ای که عنصر با عناصر دیگر می‌سازد. این فضا شفاف است و رنگی ندارد.

Margin کجای Box Model قرار دارد؟

در مدل جعبه، Margin بیرونی‌ترین لایه است:

/* از بیرون به داخل */
    Margin → Border → Padding → Content

ویژگی‌های Margin

ویژگیتوضیح
margin-topفاصله از بالا
margin-rightفاصله از راست
margin-bottomفاصله از پایین
margin-leftفاصله از چپ
marginخلاصه همه (Shorthand)

نحوه مقداردهی (Shorthand)

ویژگی margin می‌تواند ۱ تا ۴ مقدار بگیرد:

/* ۱ مقدار — همه طرف‌ها */
    margin: 20px;
    
    /* ۲ مقدار — عمودی | افقی */
    margin: 10px 20px;
    
    /* ۳ مقدار — بالا | چپ‌راست | پایین */
    margin: 10px 20px 30px;
    
    /* ۴ مقدار — بالا | راست | پایین | چپ (ساعتگرد) */
    margin: 10px 20px 30px 40px;

مقدار auto (وسط‌چین کردن)

یکی از مهم‌ترین کاربردهای margin — وسط‌چین کردن عناصر block:

.container {
        width: 600px;
        margin: 0 auto;  /* عمودی صفر، افقی خودکار */
        /* عنصر دقیقاً وسط صفحه قرار می‌گیرد */
    }

⚠️ برای اینکه auto کار کند، عنصر باید width داشته باشد.

مقدار منفی

Margin می‌تواند منفی باشد — عنصر را به بیرون می‌کشد یا روی عنصر دیگر می‌برد:

/* کشیدن به سمت چپ — روی عنصر قبلی */
    .pull-left {
        margin-left: -20px;
    }
    
    /* کشیدن به سمت بالا */
    .pull-up {
        margin-top: -10px;
    }

واحدهای Margin

واحدتوضیحمثال
pxپیکسل ثابتmargin: 20px
%درصد از عرض والدmargin: 10%
emنسبی به فونت عنصرmargin: 2em
remنسبی به فونت ریشهmargin: 1.5rem
vw / vhنسبت به ویوپورتmargin: 5vw
autoخودکار (وسط‌چین)margin: auto

Margin Collapse (ادغام حاشیه‌ها)

یکی از مهم‌ترین و عجیب‌ترین رفتارهای CSS — دو Margin عمودی بزرگ‌تر نمایش داده می‌شود، نه مجموع:

/* عنصر بالا */
    .top {
        margin-bottom: 30px;
    }
    
    /* عنصر پایین */
    .bottom {
        margin-top: 20px;
    }
    
    /* فاصله بین این دو: max(30, 20) = 30px، نه 50px! */

چه زمانی Collapse رخ می‌دهد؟

چه زمانی Collapse رخ نمی‌دهد؟

ترکیب Margin با سایر ویژگی‌ها

.card {
        margin: 20px;           /* حاشیه خارجی */
        padding: 15px;          /* حاشیه داخلی */
        border: 1px solid #ddd; /* حاشیه */
        background: white;
        border-radius: 8px;
    }

Margin در Flexbox و Grid

در فلکس‌باکس، margin برای فاصله بین آیتم‌ها استفاده می‌شود:

.flex-item {
        margin-right: 15px;  /* فاصله بین آیتم‌ها */
    }
    
    /* برای توزیع فضا */
    .space-between {
        margin: 0 auto;  /* وسط‌چین در فلکس */
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط