حاشیه CSS

margin این عنصر 70px است.

آموزش شخصی

حاشیه CSS

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

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

Margin - سمت‌های جداگانه

CSS دارای ویژگی‌هایی برای مشخص کردن margin هر سمت عنصر است:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

همه ویژگی‌های margin می‌توانند مقدارهای زیر را تنظیم کنند:

  • auto - برای اینکه مرورگر مقدار margin را محاسبه کند
  • length - برای مشخص کردن margin با واحد‌های px، pt، cm و غیره
  • % - برای مشخص کردن margin به عنوان درصد از عرض عنصر محتوی
  • inherit - برای مشخص کردن اینکه باید margin از عنصر والد ارث‌برداری کند

توضیح:مقدارهای منفی مجاز هستند.

مثال

برای همه چهار لبه <p> عناصر مقدارهای مختلف margin تنظیم می‌کنیم:

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

آموزش شخصی

Margin - ویژگی کوتاه‌نویسی

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

margin ویژگی‌ها به عنوان کوتاه‌نویسی از ویژگی‌های margin‌های بیرونی زیر هستند:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

مکانیزم کار به این صورت است:

اگر margin ویژگی چهار مقدار دارد:

  • margin: 25px 50px 75px 100px;
    • margin‌های بالا 25px هستند
    • margin‌های راست 50px هستند
    • margin‌های پایین 75px هستند
    • margin‌های چپ 100px هستند

مثال

ویژگی کوتاه‌نویسی margin چهار مقدار را تنظیم کرده است:

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

آموزش شخصی

اگر margin ویژگی سه مقدار را تنظیم کرده است:

  • margin: 25px 50px 75px;
    • margin‌های بالا 25px هستند
    • margin‌های سمت راست و چپ 50px هستند
    • margin‌های پایین 75px هستند

مثال

از طریق تنظیم سه مقدار برای ویژگی margin کوتاه‌نویسی استفاده کنید:

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

آموزش شخصی

اگر margin ویژگی دو مقدار را تنظیم کرده است:

  • margin: 25px 50px;
    • margin‌های بالا و پایین 25px هستند
    • margin‌های سمت راست و چپ 50px هستند

مثال

از طریق تنظیم دو مقدار برای ویژگی margin کوتاه‌نویسی استفاده کنید:

p {
  margin: 25px 50px;
}

آموزش شخصی

اگر margin ویژگی مقدار را تنظیم کرده است:

  • مargins: 25px;
    • تمام چهار margin‌های بیرونی 25px هستند

مثال

از طریق تنظیم یک مقدار برای ویژگی margin کوتاه‌نویسی استفاده کنید:

p {
  مargins: 25px;
}

آموزش شخصی

مقدار اتوماتیک

شما می‌توانید حاشیه margin را تنظیم کنید auto، تا عنصر درون محیط خود به صورت افقی居中对 شود.

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

مثال

استفاده از margin: auto:

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

آموزش شخصی

مقدار inherit

این مثال باعث می‌شود که حاشیه چپ عناصر <p class="ex1"> از عنصر والد (div) ارث ببرد:

مثال

استفاده از مقدار inherit:

div {
  border: 1px solid red;
  margin-left: 100px;
}
p.ex1 {
  margin-left: inherit;
}

آموزش شخصی

خواندن بیشتر

کتاب‌های درسی:مدل قاب: حاشیه چپ CSS