فاصله بیرونی در CSS

این عنصر دارای فاصله بیرونی (margin) به اندازه ۷۰ پیکسل است.

معرفی ویژگی‌های Margin در CSS

ویژگی‌های margin در CSS برای ایجاد فاصله در اطراف عناصر استفاده می‌شوند؛ این فاصله خارج از مرزهای تعریف‌شده عنصر قرار می‌گیرد.

به‌عبارت‌دیگر، margin فاصله‌ای را مشخص می‌کند که بین مرز عنصر و عناصر اطراف آن قرار دارد.

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

Margin برای هر طرف به‌صورت جداگانه

CSS ویژگی‌هایی برای تعیین فاصله بیرونی هر طرف عنصر دارد:

• margin-top — تعیین فاصله از بالا

• margin-right — تعیین فاصله از سمت راست

• margin-bottom — تعیین فاصله از پایین

• margin-left — تعیین فاصله از سمت چپ

مقادیر قابل‌استفاده برای ویژگی‌های margin عبارت‌اند از:

• auto — مرورگر مقدار فاصله را به‌صورت خودکار محاسبه می‌کند

• length — تعیین فاصله با واحدهایی مانند px، pt، cm و غیره

• % — تعیین فاصله به‌صورت درصدی از عرض عنصر والد

• inherit — مقدار فاصله از عنصر والد به ارث برده می‌شود

نکته: استفاده از مقادیر منفی نیز مجاز است.

مثال

تنظیم فاصله‌های متفاوت برای چهار طرف یک عنصر <p>:

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

ویژگی خلاصه‌نویسی‌شده margin

برای کوتاه‌تر کردن کد، می‌توان همه‌ی مقادیر margin را در یک خط مشخص کرد.

ویژگی margin یک ویژگی خلاصه‌نویسی‌شده برای ویژگی‌های زیر است:

• margin-top

• margin-right

• margin-bottom

• margin-left

نحوه عملکرد:

اگر چهار مقدار مشخص شود:

margin: 25px 50px 75px 100px;

• فاصله از بالا: ۲۵ پیکسل

• فاصله از راست: ۵۰ پیکسل

• فاصله از پایین: ۷۵ پیکسل

• فاصله از چپ: ۱۰۰ پیکسل

p {
  margin: 25px 50px 75px 100px;
}

اگر سه مقدار مشخص شود:

margin: 25px 50px 75px;

• فاصله از بالا: ۲۵ پیکسل

• فاصله از راست و چپ: ۵۰ پیکسل

• فاصله از پایین: ۷۵ پیکسل

p {
  margin: 25px 50px 75px;
}

اگر دو مقدار مشخص شود:

margin: 25px 50px;

• فاصله از بالا و پایین: ۲۵ پیکسل

• فاصله از راست و چپ: ۵۰ پیکسل

p {
  margin: 25px 50px;
}

اگر فقط یک مقدار مشخص شود:

margin: 25px;

• فاصله از همه‌ی جهات: ۲۵ پیکسل

p {
  margin: 25px;
}

مقدار auto

می‌توانید مقدار auto را برای ویژگی margin تنظیم کنید تا عنصر به‌صورت افقی درون ظرف خود وسط‌چین شود.

در این حالت، عنصر عرض مشخص‌شده را می‌گیرد و فضای باقی‌مانده به‌طور مساوی بین فاصله‌های چپ و راست تقسیم می‌شود.

مثال

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

مقدار inherit

با استفاده از مقدار inherit، می‌توانید فاصله را از عنصر والد به ارث ببرید.

در مثال زیر، فاصله سمت چپ عنصر <p class="ex1"> از عنصر والد <div> به ارث برده می‌شود:

مثال

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

p.ex1 {
  margin-left: inherit;
}

فهرست کامل ویژگی‌های CSS مربوط به Margin