CSS – فاصله‌های بیرونی (Margins)

Last Update: ۲۹ اسفند ۱۴۰۲

در اینجا خواص مربوط به حاشیه (Margins) در CSS به صورت متنی و بدون استفاده از جدول توضیح داده شده‌اند:

margin: یک خاصیت shorthand است که برای تنظیم تمام مقادیر حاشیه‌ها (بالا، راست، پایین، چپ) به کار می‌رود. می‌توان این خاصیت را با استفاده از ۱ تا ۴ مقدار مشخص کرد. به عنوان مثال، margin: 25px 50px 75px 100px; به ترتیب حاشیه‌های بالا، راست، پایین و چپ را تنظیم می‌کند.
margin-bottom: این خاصیت برای تنظیم حاشیه پایین یک عنصر استفاده می‌شود.
margin-left: این خاصیت برای تنظیم حاشیه چپ یک عنصر استفاده می‌شود.
margin-right: این خاصیت برای تنظیم حاشیه راست یک عنصر استفاده می‌شود.
margin-top: این خاصیت برای تنظیم حاشیه بالای یک عنصر استفاده می‌شود.

مقادیر معتبر برای خاصیت‌های حاشیه:

اگر خاصیت margin دارای یک مقدار باشد، آن مقدار برای تمام جهات (بالا، پایین، چپ، راست) اعمال می‌شود.
اگر دو مقدار داشته باشد، اولین مقدار برای بالا و پایین و دومین مقدار برای چپ و راست اعمال می‌شود.
اگر سه مقدار داشته باشد، اولین مقدار برای بالا، دومین مقدار برای چپ و راست و سومین مقدار برای پایین اعمال می‌شود.
اگر چهار مقدار داشته باشد، به ترتیب برای بالا، راست، پایین و چپ اعمال می‌شود.

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

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

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

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}