akofaraji.ir
Margin ها در زبان CSS
نوشته شده در تاریخ 13 آذر 1401
نظرات: 0 امتیاز: 9 زمان مطالعه: 15 دقیقه
حاشیه ها (Margin) در CSS
 
 

Margin چیست؟

 

خصوصیت margin در زبان CSS سعی می کند تا در اطراف یک عنصر فضای خالی ایجاد کند. زمانی که می گوییم اطراف یک عنصر یعنی هر چیزی که وابسته به این عنصر باشد کنارش می ماند (مانند حاشیه ها و …) اما بقیه ی عناصر مجاور کنار می روند. به زبان ساده تر margin یعنی فاصله ی بین یک عنصر و عناصر دور و برش (مانند تصاویر، متن ها و …).

 

در زبان CSS برای تعیین margin دستتان باز است و می توانید آن را از چهار طرف به صورت جداگانه تعیین کنید:

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

 

مقادیر قابل قبول برای margin ها عبارت اند از:

  • auto: اگر این مقدار را به margin بدهید، خود مرورگر مقدارش را تعیین می کند.
  • واحد طول: در این حالت باید مقدار margin را در یکی از واحد های طول پذیرفته شده مانند px یا pt یا cm و … تعیین کنید.
  • درصد: در این حالت margin بر اساس درصدی از عرض عنصر تعیین می شود.
  • inherit: در لغت به معنی «به ارث بردن» است. در این حالت margin مقدار خود را از عنصر پدرش به ارث می برد.
 
نکته: مقادیر منفی نیز مجاز هستند! مقادیر منفی به جای ایجاد فضای خالی، آن را کم می کنند و عناصر را به هم نزدیک تر می نمایند.

 

در مثال زیر برای عنصر div از هر چهار طرف margin تعیین کرده ایم:

 

مشاهده ی خروجی در JSBin

 

دستور خلاصه شده margin

تا اینجای کار فهمیدیم که margin را می توان از چهار سمت تعریف کرد:

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

 

اما برای راحتی کار شما شکل خلاصه شده ای از این 4 دستور وجود داشته و از این قرار است:

 

دستور margin برای مقادیر چهار تایی به صورت ;margin: 25px 50px 75px 100px :

  • margin بالای عنصر 25px
  • margin راست عنصر 50px
  • margin پایین عنصر 75px
  • margin چپ عنصر 100px

مثال:

 

مشاهده ی خروجی در JSBin

 

دستور margin برای مقادیر سه تایی به صورت ;margin: 25px 50px 75px :

  • margin بالای عنصر 25px
  • margin راست و چپ عنصر 50px
  • margin پایین عنصر 75px

 

مثال:

 

مشاهده ی خروجی در JSBin

 

دستور margin برای مقادیر دو تایی به صورت ;margin: 25px 50px :

  • margin بالا و پایین عنصر 25px
  • margin راست و چپ عنصر 50px

 

مثال:

 

مشاهده ی خروجی در JSBin

 

دستور margin برای مقادیر تکی به صورت ;margin: 25px:

  • margin بالا و پایین و چپ و راست عنصر 25px

 

مثال:

 

مشاهده ی خروجی در JSBin

 

مقادیر auto و inherit

 

اگر از مقدار auto استفاده کنید مرورگر عنصر مورد نظر را (در محور افقی) وسط عنصر پدرش می گذارد. به عبارت دیگر auto ابتدا عرض عنصر یا width را می گیرد و سپس هر چقدر فضا باقی ماند بین قسمت چپ و راست تقسیم می شود. به مثال زیر توجه کنید:

 

مشاهده ی خروجی در JSBin

 

اما اگر به عنصرتان مقدار inherit را بدهید، همان margin پدر را به ارث می برید. در مثال زیر عنصر <p class="ex1"> را داریم و می خواهیم margin سمت چپ اش را از پدرش (یعنی <div>) به ارث ببرد:

 

مشاهده ی خروجی در JSBin

 

می بینید که عنصر ما margin خود را از پدرش، یعنی div، گرفته است.

 

خطای فروریختگی margin

 

برخی اوقات، margin بالا و پایین عناصر در هم فرو می ریزند. در این حالت margin بین آن ها تنها به اندازه ی بزرگترین margin یکی از دو عنصر خواهد بود. این مسئله برای margin های راست و چپ اتفاق نمی افتد بلکه تنها برای margin های بالا و پایین صادق است. به طور مثال در کد زیر h1 دارای margin تحتانی 50 پیکسل و h2 دارای margin فوقانی 20 پیکسل است. بنابراین فاصله ی عمودی بین h1 و h2 باید 70 پیکسل باشد (50px + 20px) اما margin ها روی هم می افتند و فاصله ی بینشان 50 پیکسل (مقدار margin بزرگتر) می شود:

 

مشاهده ی خروجی در JSBin

 

باید همیشه مراقب این اتفاق در HTML و CSS باشید و محاسبات خود را بر اساس آن انجام دهید. گرچه در قسمت های آینده توضیحات بیشتری در مورد این نوع خطاها به شما می دهیم.

 

منبع: سایت روکسو


اگر احساس می کنید این مطلب برای شما مفید بود ، از 1 تا 10 به این مطلب امتیاز دهید

دیدگاه کاربران در مورد این مطلب

ثبت نظر
به نظر خوب میاد!
لطفا نام را وارد کنید
@
لطفا یک ایمیل منحصر به فرد و معتبر انتخاب کنید.
لطفا متن با کلمات و معانی مفهوم دار وارد نمایید