حاشیه بیرونی (Margin) در CSS
جعبه را رنگ می‌کنید، حاشیه می‌کشید و گوشه گرد می‌کنید. مهارت بعدی: جعبه‌ها را از هم جدا کنید. margin همان فاصلهٔ بیرونی دور عنصر است — فضای تنفس بیرون از حاشیه (border).
margin چیست؟
Margin فضای خالی دور بیرونِ حاشیهٔ عنصر است. یک جعبه را از همسایه‌ها جدا می‌کند. پس‌زمینهٔ عنصر را داخل این فاصله رنگ نمی‌کند — این فاصله بیرون از ناحیهٔ پرشده است.
Margin در برابر padding (فرق کوتاه)
Padding (درس بعد) داخل حاشیه است — بین محتوا و لبه. Margin بیرون حاشیه است — بین این جعبه و جعبهٔ بعدی. اگر امروز یک خط یادتان بماند: margin = بیرون، padding = داخل.
میان‌بر: چند مقدار؟
می‌توانید یک، دو، سه یا چهار طول بدهید. ترتیب اضلاع ثابت است.
📊 شمارش مقدارهای میان‌بر margin
| تعداد | معنی | نکتهٔ روزمره |
|---|---|---|
| ۱ | هر چهار ضلع یکسان | فضای تنفس یکنواخت دور کارت |
| ۲ | بالا+پایین، بعد چپ+راست | جفت عمودی و افقی |
| ۳ | بالا، چپ+راست، پایین | کمتر رایج — وجودش را بشناسید |
| ۴ | بالا، راست، پایین، چپ | کنترل کامل، ساعت‌گرد از بالا |
فاصلهٔ یکسان روی هر ضلع
با یک طول برای همهٔ اضلاع شروع کنید.
margin یکسان روی همهٔ اضلاع
css.card {
margin: 16px;
border: 1px solid #cbd5e1;
padding: 1rem;
background-color: #ffffff;
}دو مقدار — عمودی، بعد افقی
دو طول اضلاع روبه‌رو را جفت می‌کند: اولی بالا و پایین؛ دومی چپ و راست.
margin عمودی بعد افقی
css.panel {
margin: 24px 12px;
border: 1px solid #94a3b8;
padding: 1rem;
background-color: #f8fafc;
}چهار مقدار — ساعت‌گرد از بالا
وقتی هر ضلع فاصلهٔ خودش را می‌خواهد: بالا → راست → پایین → چپ.
میان‌بر چهارضلعی margin
css.note {
margin: 8px 20px 32px 20px;
border: 1px solid #0f766e;
padding: 0.75rem;
background-color: #ecfdf5;
}وسط‌چین کردن بلوک با auto
برای جعبهٔ سطح‌بلوک با عرض مشخص، margin-left: auto و margin-right: auto (اغلب margin: 0 auto) فضای باقی‌مانده را دو طرف برابر پخش می‌کنند — راه کلاسیک برای وسط‌چین افقی.
وسط‌چین افقی با auto
css.box {
width: 280px;
margin: 0 auto;
border: 2px solid #0f766e;
padding: 1rem;
background-color: #f0fdfa;
}marginهای عمودی ممکن است جمع شوند
وقتی دو عنصر بلوک روی هم می‌نشینند، margin پایین اولی و margin بالای دومی اغلب جمع (collapse) می‌شوند و یک فاصله می‌سازند — معمولاً بزرگ‌ترِ آن دو، نه جمع‌شان. مبتدی‌ها را غافلگیر می‌کند؛ بین پاراگراف‌ها و بخش‌های پشت‌سرهم انتظارش را داشته باشید.
بلوک‌های روی هم با جمع شدن margin
css.block-a {
margin-bottom: 24px;
background-color: #ccfbf1;
padding: 0.5rem;
}
.block-b {
margin-top: 24px;
background-color: #99f6e4;
padding: 0.5rem;
}
/* بینشان اغلب حدود ۲۴px می‌بینید، نه ۴۸px */یک ضلع جدا
بلندنویسی مثل margin-top وقتی فقط بالای تیتر یا زیر دکمه جا می‌خواهید عالی است.
فقط margin بالا
css.section-title {
margin-top: 2rem;
margin-bottom: 0.5rem;
margin-left: 0;
margin-right: 0;
}خودتان امتحان کنید
- به دو کارت
margin: 16pxبدهید و فاصلهٔ بیرونی را ببینید. - یکی را
margin: 24px 12pxبنویسید و فرق عمودی/افقی را حس کنید. - جعبهٔ ۲۸۰ پیکسلی را با
margin: 0 autoوسط بچینید. - دو بلوک رنگی با
margin-bottomوmargin-topهر دو ۲۴px روی هم بچینید — ببینید فاصله حدود ۲۴ است یا ۴۸. - تیتر را فقط با
margin-topفاصله بدهید.
اشتباهات رایج
- استفاده از margin وقتی منظورتان padding بود (کوسن داخلی برای متن)
- انتظار که
margin: autoهر آیتم flex/grid را مثل بلوک ساده وسط کند (زمینهٔ چیدمان مهم است) - گذاشتن margin بالا و پایین و فرض اینکه همیشه جمع می‌شوند (collapse ممکن است فاصله را کوچک‌تر کند)
- marginهای غول‌پیکر همه‌جا به‌جای مقیاس کوچک و یکدست
- قاطی کردن ترتیب چهار مقدار (بالا، راست، پایین، چپ)
خلاصه
- Margin فضای بیرونی بیرون از حاشیه است
- میان‌بر: ۱، ۲ یا ۴ مقدار (چهارتایی ساعت‌گرد از بالا)
margin: 0 autoبلوک با عرض مشخص را افقی وسط می‌کند- marginهای عمودی بین بلوک‌های روی هم ممکن است جمع شوند
- برای یک ضلع، از بلندنویسی استفاده کنید
- Padding عموزادهٔ داخلی است — درس بعد
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود