CSS

جلسه۶: خاصیت margin در css

خاصیت margin در CSS برای ایجاد فضای خالی در اطراف عناصر، کاربرد دارد.

از خاصیت margin می توانید به همه ی جهات عنصر خود فضای خالی بدهید. شما هم چنین می توانید با استفاده از خواص زیر، به هر جهت که مد نظر شما هست فضای خالی اعمال کنید.

خواص مورد استفاده برای اعمال فضای خالی در جهات مختلف عناصر:

  • margin-top: اعمال فضای خالی در بالای عنصر
  • margin-right: اعمال فضای خالی در سمت راست عنصر
  • margin-bottom: اعمال فضای خالی در پایین عنصر
  • margin-left: اعمال فضای خالی در سمت چپ عنصر

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

  • auto – مرورگر به صورت خودکار فضا را تنظیم می کند.
  • length – فضای خالی بر اساس مقادیر cm, pt, px و غیره تنظیم می شود.
  • درصد(%) – تغییر اندازه فضای خالی، نسبت به اندازه ی صفحه نمایش به اندازه درصد خواهد بود.
  • inherit  – میزان فضای خالی را از عنصر پدر خود به ارث می برد.

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

مثال زیر حاوی margin های مختلف برای هر چهار جهت عنصر <p> است:

همانطور که در مثال زیر می بینید عنصر <p> یا پاراگراف دارای ۱۰۰ پیکسل فضای خالی از بالا، ۱۰۰ پیکسل فضای خالی از پایین، ۸۰ پیکسل فضای خالی از سمت چپ و ۱۰۰ پیکسل فضای خالی از سمت راست است.

این عنصر دارای خاصیت margin با مقادیر margin-top: 100px, margin-bootom: 100px, margin-right: 100px, margin-left: 80px است.

 

margin کوتاه یا مختصر

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

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

خاصیت margin با ۴ مقدار

margin: 25px 50px 75px 100px;

  • مقدار ۱- ۲۵px پیکسل فضای خالی در جهت بالای عنصر اعمال می کند.
  • مقدار ۲- ۵۰px – پیکسل فضای خالی در جهت راست عنصر اعمال می کند.
  • مقدار ۳ – ۷۵px پیکسل فضای خالی در جهت پایین عنصر اعمال می کند.
  • مقدار ۴ – ۱۰۰px پیکسل فضای خالی در جهت چپ عنصر اعمال می کند.

در صورتی که بخواهید به هر جهت میزان متفاوتی فضای خالی اعمال کنید میبایست از ۴ مقدار استفاده کنید. مقادیر، در جهت حرکت عقربه های ساعت روی عنصر اعمال می شوند. به عنوان مثال: margin: 10px 20px 30px 40px، در جهت بالا ۱۰ پیکسل فضای خالی، در جهت راست ۲۰ پیکسل فضای خالی، ۳۰ پیکسل فضای خالی، ۴۰ پیکسل فضای خالی اعمال می کند.

به مثال زیر دقت کنید:

نتیجه به صورت زیر خواهد بود:

استفاده از خاصیت margin با ۴ مقدار – مقادیر در جهت حرکت عقربه های ساعت فضای خالی به عنصر اعمال می کنند.

 

خاصیت margin با ۲ مقدار

margin: 50px 20px;

  • مقدار ۱- ۵۰px پیکسل فضای خالی در جهات بالا و پایین عنصر اعمال می کند.
  • مقدار ۲- ۲۰px پیکسل فضای خالی در جهات راست و چپ عنصر اعمال می کند.

زمانی که شما در خاصیت margin از ۲ مقدار استفاده کنید، مقدار ۱ به جهات بالا و پایین عنصر فضای خالی و مقدار ۲ به جهات راست و چپ عنصر فضای خالی اعمال می کند.

به مثال زیر دقت کنید:

نتیجه:

استفاده از خاصیت margin با ۲ مقدار – مقدار اول به جهات بالا و پایین فضای خالی و مقدار ۲ به جهات راست و چپ عنصر فضای خالی اعمال می کند.

 

خاصیت margin با ۱ مقدار

margin: 50px;

  • به ۴ جهت عنصر ۵۰ پیکسل فضای خالی اعمال می شود.

زمانی که از یک مقدار در خاصیت margin استفاده کنید، فضای خالی در تمام جهات به یک میزان اعمال خواهد شد.

مثال:

نتیجه:

خاصیت margin با ۱ مقدار، به ۴ جهت عنصر به یک میزان فضای خالی اعمال می کند.

 

خاصیت margin با مقدار auto

مقدار auto این اجازه را به مرورگر میدهد که فضای اطراف را به صورت خودکار تنظیم کند. اگر عنصر خاصیت عرض یا width گرفته باشد در مرکز صفحه قرار  میگیرد در غیر این صورت تمام عرض را پوشش می دهد.

به مثال زیر دقت کنید:

همانطور که میبیند پس از اعمال مقدار auto، عنصر در مرکز قرار گرفته است:

خاصیت margin با مقدار auto

 

خاصیت margin با مقدار inherit

مقدار inherit، ویژگی ها را از عنصر پدر خود به ارث میبرد. به مثال زیر دقت کنید:

نتیجه به صورت زیر خواهد بود:

همانطور که میبیند عنصر p(متن) میزان ۱۰۰ پیکسل فضای خالی از سمت چپ همانند پدر خود یعنی div(مرزبندی سبز رنگ) به ارث برده است.

مقدار inherit این اجازه را می دهد که عنصر p ویژگی های را از پدر خود یعنی div به ارث برد.

 

جلسه بعد 

جلسه قبل

به این مطلب چه امتیازی می‌دهید؟

نوشته های مشابه

دیدگاهتان را بنویسید

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

دکمه بازگشت به بالا
بستن