آموزش حاشیه های CSS

7 جولای 2021

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


حاشیه های CSS

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

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


حاشیه – جنبه های فردی

CSS خصوصیاتی برای تعیین حاشیه برای هر طرف یک عنصر دارد:

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

تمام خصوصیات حاشیه می توانند مقادیر زیر را داشته باشند:

  • خودکار – مرورگر حاشیه را محاسبه می کند
  • length – یک حاشیه در px ، pt ، cm و غیره را مشخص می کند.
  • ٪ – یک حاشیه در درصد عرض عنصر حاوی را مشخص می کند
  • Heritage – مشخص می کند که حاشیه باید از عنصر والد به ارث برسد

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

مثال

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

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

حاشیه – املاک مختصر

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

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

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

بنابراین ، نحوه کار آن در اینجا است:

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

  • حاشیه: 25px 50px 75px 100px؛
    • حاشیه بالا 25 پیکسل است
    • حاشیه راست 50px است
    • حاشیه پایین 75px است
    • حاشیه سمت چپ 100 پیکسل است

مثال

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

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

اگر marginخاصیت دارای سه مقدار باشد:

  • حاشیه: 25px 50px 75px؛
    • حاشیه بالا 25 پیکسل است
    • حاشیه راست و چپ 50 پیکسل است
    • حاشیه پایین 75px است

مثال

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

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

اگر marginخاصیت دو مقدار داشته باشد:

  • حاشیه: 25 پیکسل 50 پیکسل؛
    • حاشیه بالا و پایین 25 پیکسل است
    • حاشیه راست و چپ 50 پیکسل است

مثال

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

p {
  margin: 25px 50px;
}

اگر marginخاصیت دارای یک مقدار باشد:

  • حاشیه: 25px؛
    • هر چهار حاشیه 25 پیکسل هستند

مثال

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

p {
  margin: 25px;
}

ارزش خودکار

می توانید خاصیت margin را طوری تنظیم کنید autoکه عنصر را درون ظرف آن به صورت افقی قرار دهد.

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

مثال

استفاده از حاشیه: خودکار:

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

مقدار ارثی

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

مثال

استفاده از مقدار ارثی:

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

p.ex1 {
  margin-left: inherit;
}

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

نشانی ایمیل شما منتشر نخواهد شد.