CSS Margins

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

margin
خاصیت کوتاه‌شده برای تنظیم فاصله در همه جهات (بالا، راست، پایین، چپ) به صورت همزمان.

margin: 10px;

این یعنی همه‌ی چهار طرف فاصله ۱۰ پیکسل خواهد داشت.

مثال:

margin-top: 20px;
margin-left: 5px;

3. استفاده از مقادیر مختلف در shorthand margin
اگر چهار مقدار وارد کنید به ترتیب:

margin: بالا راست پایین چپ;

مثال:

margin: 10px 20px 5px 15px;

اگر سه مقدار بدهید:

margin: 10px 20px 5px;

اگر دو مقدار بدهید:

margin: 10px 20px;

auto: خود مرورگر فاصله را تنظیم می‌کند، معمولاً برای وسط‌چین کردن عناصر کاربرد دارد.
مثال:

margin: 0 auto;

مقادیر منفی:
می‌توان margin را منفی داد که باعث می‌شود عناصر به هم نزدیک‌تر یا حتی روی هم قرار بگیرند.
مثال:

margin-top: –10px;