حاشیههای بیرونی در CSS
Margin (حاشیهی بیرونی) فضایی است که در بیرون از حاشیهی (border) یک عنصر قرار میگیرد و آن عنصر را از سایر عناصر اطرافش جدا میکند. با استفاده از Margin میتوان فاصلهی بین عناصر مختلف صفحه را کنترل کرد.
ویژگیهای جداگانهی Margin
برای تعیین حاشیهی بیرونی هر ضلع بهصورت جداگانه، از چهار ویژگی زیر استفاده میشود:
- margin-top: فاصله از بالا
- margin-right: فاصله از راست
- margin-bottom: فاصله از پایین
- margin-left: فاصله از چپ
div{ margin-top: 20px; margin-right: 15px; margin-bottom: 20px; margin-left: 15px; }
در این مثال، عنصر div از بالا و پایین 20px و از راست و چپ 15px فاصله میگیرد.
ویژگی کوتاهشدهی margin
بهجای نوشتن چهار ویژگی جداگانه، میتوان از ویژگی کوتاهشدهی margin استفاده کرد. بسته به تعداد مقادیر نوشتهشده، نحوهی اعمال آن متفاوت است:
- با یک مقدار: هر چهار طرف به یک اندازه فاصله میگیرند.
- با دو مقدار: مقدار اول برای بالا و پایین، مقدار دوم برای راست و چپ است.
- با چهار مقدار: به ترتیب برای بالا، راست، پایین و چپ اعمال میشود.
div{ margin: 20px 15px 20px 15px; }
این خط دقیقاً همان نتیجهی مثال قبلی را ایجاد میکند، اما بهصورت خلاصه و در یک خط نوشته شده است.
وسطچین کردن عنصر با margin
یکی از کاربردهای رایج Margin، وسطچین کردن افقی یک عنصر بلوکی است. برای این کار، باید عرض عنصر مشخص شود و مقدار margin-left و margin-right برابر auto قرار بگیرد.
div{ width: 300px; margin: 0 auto; }
در این مثال، عرض عنصر div برابر 300px تنظیم شده و با استفاده از margin: 0 auto;، این عنصر بهصورت افقی در وسط صفحه قرار میگیرد.
مقدار منفی در margin
برخلاف بسیاری از ویژگیهای دیگر، مقدار Margin میتواند منفی نیز باشد. با این کار میتوان عنصر را به سمت عناصر مجاورش نزدیکتر کرد یا حتی روی آنها قرار داد.
div{ margin-top: -10px; }
در این مثال، عنصر div با مقدار منفی 10px ، به سمت بالا و نزدیکتر به عنصر قبلی خودش جابهجا میشود.