حاشیه‌ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< CSS:Tutorial(تغییرمسیر از CSS:حاشیه‌ها)
پرش به ناوبری پرش به جستجو

این عنصر دارای مقدار حاشیه 70px است.[۱]

This element has a margin of 70px


حاشیه ها (Margins) در CSS

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

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

حاشیه - جهت‌های منحصر به فرد

CSS ویژگی‌هایی برای مشخص کردن حاشیه هر طرف یک عنصر دارد:

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

تمامی ویژگی‌های حاشیه می‌توانند مقادیر زیر را داشته باشند:

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

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

مثال

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

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


حاشیه - ویژگی مختصر

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

ویژگی margin یک ویژگی مختصر برای ویژگی‌های حاشیه ای مجزای زیر است:

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

بنابراین، شیوه کار به این صورت است:

اگر ویژگی margin چهار مقدار داشته باشد:
  • مقدار فاصله از بالا ۲۵ پیکسل است
  • مقدار فاصله از راست ۵۰ پیکسل است
  • مقدار فاصله از پایین ۷۵ پیکسل است
  • مقدار فاصله از چپ ۱۰۰ پیکسل است
margin: 25px 50px 75px 100px;

مثال

از ویژگی مختصر حاشیه با چهار مقدار استفاده می کند:

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


اگر ویژگی margin سه مقدار داشته باشد:
  • مقدار فاصله از بالا ۲۵ پیکسل است
  • مقدار فاصله از راست (right margin) و چپ ۵۰ پیکسل است
  • مقدار فاصله از پایین ۷۵ پیکسل است
margin: 25px 50px 75px;

مثال

از ویژگی مختصر حاشیه با سه ویژگی استفاده می کند:

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


اگر ویژگی marginدو مقدار داشته باشد:
  • مقدار فاصله از بالا (top margin) و فاصله از پایین ۲۵ پیکسل است
  • مقدار فاصله از سمت راست (right margin) و فاصله از سمت چپ ۵۰ پیکسل است
margin: 25px 50px;

مثال

استفاده از ویژگی کوتاه شده margin با دو مقدار:

p {
  margin: 25px 50px;
}


اگر ویژگی marginیک مقدار داشته باشد:
  • تمامی چهار margin مقدار ۲۵ پیکسل دارند
margin: 25px;

مثال

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

p {
  margin: 25px;
}


مقدار auto

می‌توانید مقدار ویژگی حاشیه را برابر با auto قرار دهید تا عنصر را بصورت وسط چین در داخل ظرف (Container) آن قرار دهد.

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

مثال

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

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


مقدار Inherit (به فارسی: ارث‌بری)

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

مثال

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

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

p.ex1 {
  margin-left: inherit;
}


منابع آموزشی