حاشیه CSS: حاشیه در مقابل بالشتک و نحوه تنظیم حاشیه CSS

TL ؛ DR - ویژگی Margin CSS فضای اطراف یک عنصر HTML را اضافه می کند. این منطقه حاشیه خارج از مرزها و سایر محتوای عناصر است.

این عنصر حاشیه 20px دارد.

فهرست

• 1. دارایی حاشیه ای
• 1. 1حاشیه در مقابل بالشتک
• 1. 2تنظیم یک یا چند مقدار
• 2. ارزش خودکار CSS
• 3. ارثی حاشیه ها
• 4- سقوط حاشیه توضیح داده شده است
• 5. حاشیه CSS: نکات مفید

دارایی حاشیه ای

مدل جعبه زیر نشان می دهد که چگونه قسمت های جداگانه یک جعبه با یکدیگر تعامل دارند. این مدل در CSS از چندین مؤلفه تشکیل شده است: محتوا ، بالشتک ، مرز و حاشیه.

حاشیه CSS چهار قسمت دارد:

• حاشیه
• حاشیه راست
• حاشیه پایین
• حاشیه چپ

با حاشیه حاشیه ، می توانید تمام خواص فوق را در یک اعلامیه تنظیم کنید.

حاشیه در مقابل بالشتک

• هر دو حاشیه و بالشتک متعلق به مدل جعبه هستند.
• تفاوت اصلی این است که حاشیه فضای اطراف یک عنصر را اضافه می کند ، در حالی که بالشتک فضایی را در یک عنصر ایجاد می کند.
• شما نمی توانید از مقدار خودکار استفاده کنید تا مرورگرها به طور خودکار بالشتک را تنظیم کنید.
• بحث حاشیه در مقابل بالشتک اتفاق می افتد زیرا این مؤلفه ها مشابه هستند ، اما موارد استفاده آنها متفاوت است.
  • حاشیه عناصر را از سایر بلوک های خارج از عنصر جدا می کند.
  • بالشتک محتوا را در داخل عناصر دور از لبه ها تغییر می دهد.

  تنظیم یک یا چند مقدار

  حاشیه در CSS می تواند یک ، دو ، سه یا چهار مقدار داشته باشد:

  • یک مقدار از همان حاشیه از همه طرف استفاده می کند.
  • دو مقدار: حاشیه اول بالا و پایین را تعیین می کند. دوم طرف های چپ و راست را تنظیم می کند.
  • سه مقدار: اولی بالا را تعیین می کند. دوم چپ و راست را تنظیم می کند. سوم پایین را تنظیم می کند.
  • چهار مقدار: ترتیب مقادیر مانند این - بالا ، راست ، پایین و چپ است.

  توجه: شما می توانید این مقادیر را با مقادیر (px ، cm ، mm ، in) ، با درصد یا خودکار تنظیم کنید تا به مرورگرها اجازه دهید حاشیه های مناسب را انتخاب کنند. مقادیر منفی حاشیه ها را به همسایگان خود نزدیک می کند.

  کپی مثال

  p <لبه: 10 عدد 20 قطعه 30 px 70px;> 

  من حاشیه دارم!

  مثال بالا دارای چهار مقدار حاشیه است: 10px 20px 30px 70px ؛بشرCSS آنها را به

  عنصر مانند این:

  در مثال زیر ، ما سه مقدار داریم: 10px 20px 30px ؛بشرما این نتایج را دریافت خواهیم کرد:

  کپی مثال

  p <لبه: 10 عدد 20 قطعه 30 px;> 

  من حاشیه دارم!

  مثال زیر دو مقدار را اختصاص می دهد: 10px 20px ؛به

  عنصر:

  کپی مثال

  p <لبه: 10 عدد 20 قطعه;> 

  من حاشیه دارم!

  برای تنظیم هر چهار حاشیه یکسان ، شما فقط باید یک مقدار را مشخص کنید:

  کپی مثال

  p <لبه: 10 عدد;> 

  من حاشیه دارم!

  مثال زیر حاشیه های فردی را با مقادیر مشخص شده در پیکسل نشان می دهد.

  من حاشیه دارم! کپی مثال

  p <حاشیه: 40 پیکسل; حاشیه پایین: 70px; حاشیه راست: 140 پیکسل; حاشیه چپ: 90 پیکسل;>

  طرفداران
  • طراحی ساده (بدون اطلاعات غیر ضروری)
  • دوره های با کیفیت (حتی رایگان)
  • تنوع امکانات
  ویژگی های اصلی
  • برنامه های نانودرجه
  • مناسب برای شرکت ها
  • گواهی پایان کار پرداخت شده
  طرفداران
  • آسان برای پیمایش
  • بدون مشکل فنی
  • به نظر می رسد به کاربران خود اهمیت می دهد
  ویژگی های اصلی
  • تنوع بسیار زیاد دوره ها
  • سیاست بازپرداخت 30 روزه
  • گواهی پایان کار رایگان
  طرفداران
  • تجربه کاربری عالی
  • محتوای با کیفیت ارائه می دهد
  • با قیمت گذاری آنها بسیار شفاف است
  ویژگی های اصلی
  • گواهی پایان کار رایگان
  • تمرکز بر مهارت های علم داده
  • جدول زمانی یادگیری انعطاف پذیر

  مقدار خودکار CSS

  ویژگی های حاشیه می توانند مقدار خودکار CSS را داشته باشند. به مرورگر می گوید که حاشیه های عناصر را با توجه به فضای موجود در کناره های عناصر تنظیم کند.

  این مثال نحوه استفاده از خودکار CSS را نشان می دهد

  ظروفما عرض و حاشیه را اضافه می کنیم تا عملکرد ویژگی margin را بهتر نشان دهیم.

  کپی مثال

  p <عرض: 200 پیکسل; لبه: خودکار؛مرز: 5 پیکسلجامد#e9385a;>

  من حاشیه های خودکار دارم!

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

  برای استفاده از CSS خودکار برای وسط یک عنصر HTML به صورت افقی در فضای موجود، این مراحل را به خاطر بسپارید:

  • عرض یک عنصر را مشخص کنید.
  • سپس، برخی از حاشیه ها را روی خودکار تنظیم کنید.

  نکته: اگر عرض را اضافه نکنید، مقادیر خودکار با اختصاص دادن 0 به حاشیه ها یا دادن فضای موجود از مورد والد، هیچ اثری را نشان نمی دهند.

  شما نباید از CSS خودکار برای وسط عناصر به صورت عمودی استفاده کنید.

  ارث بردن حاشیه ها

  همچنین می توانید از مقدار ارث بری برای تعیین حاشیه های یک عنصر استفاده کنید. مقدار ارثی حاشیه های یک والد را به عنصر فرزند منتقل می کند.

  مثال زیر نشان می دهد که عنصر والد دارای مقدار مشخصی از حاشیه سمت چپ و عنصر فرزند است

  دارای ارزش ارثی حاشیه چپ است.

  کپی مثال

  بخش. حاوی <مرز: 5 پیکسلجامد#e9385a; حاشیه چپ: 200 پیکسل;> p. نوشتن <حاشیه چپ: inherit;>