مجال CSS

پیشنهاد دوره:

آزمایش کنید

مجال CSS

حاشیه این عنصر 70px است. margin CSS

این ویژگی برای ایجاد فضایی دور عنصر در بیرون از حاشیه‌های تعریف شده استفاده می‌شود.

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

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

  • این ویژگی‌ها کوتاه‌نویسی‌های ویژگی‌های حاشیه بیرونی زیر هستند:
  • margin-top
  • margin-right
  • margin-bottom

CSS دارای ویژگی‌هایی برای تنظیم حاشیه هر سمت عنصر است:

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

inherit - برای مشخص کردن ارث‌برداری حاشیه از عنصر والد استفاده کنیدنکته:

مثال

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

p {
  برای تنظیم حاشیه‌های چهار سمت <p> به مقدارهای مختلف تنظیم کنید:
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
}

آزمایش کنید

margin-left: 80px;

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

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

  • این ویژگی‌ها کوتاه‌نویسی‌های ویژگی‌های حاشیه بیرونی زیر هستند:
  • margin-top
  • margin-right
  • margin-bottom

margin-left

اگر margin این کارکرد به این صورت است:

  • کوتاه‌نویسی margin با تنظیم چهار مقدار استفاده کنید:
    • این ویژگی سه مقدار تنظیم شده دارد:
    • این ویژگی چهار مقدار دارند:
    • حاشیه بالا 25px هستند
    • حاشیه راست 50px هستند

مثال

حاشیه چپ 100px هستند

p {
  کوتاه‌نویسی margin با تنظیم چهار مقدار استفاده کنید:
}

آزمایش کنید

اگر margin margin: 25px 50px 75px;

  • از کوتاه‌نویسی margin با تنظیم سه مقدار استفاده کنید:
    • این ویژگی سه مقدار تنظیم شده دارد:
    • حاشیه سمت راست و چپ 50px هستند
    • حاشیه بالا 25px هستند

مثال

حاشیه پایین 75px هستند

p {
  از کوتاه‌نویسی margin با تنظیم سه مقدار استفاده کنید:
}

آزمایش کنید

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

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

مثال

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

p {
  margin: 25px 50px;
}

آزمایش کنید

اگر margin مقدار تنظیم شده‌ای برای این ویژگی وجود دارد:

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

مثال

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

p {
  margin: 25px;
}

آزمایش کنید

auto کا مرتبط

شما می‌توانید حاشیه 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