صفحه اصلی / margin / آموزش Margins (مارجین) درhtml/بخش هفتم- آموزش Margins در CSS

آموزش Margins (مارجین) درhtml/بخش هفتم- آموزش Margins در CSS

 

 

آموزش Margins (مارجین) درhtml/بخش هفتم- آموزش Margins در CSS
آموزش Margins در CSS

 

CSS Margins

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

کناره های تکی

CSS  دارای این امکان است که شما خصوصیت مارجین را برای هر طرف حاشیه یک عنصر مستقلا تنظیم کنید:

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

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

 auto –  مرورگر محدوده حاشیه را محاسبه می کند.

length – محدوده حاشیه را بر اساس  px، pt،  cm و … مشخص می کند.

٪  – محدوده یک حاشیه را بر اساس ٪ از مقدار محدوده عرض عنصر مشخص می کند.

 inherit – مشخص می کند که حاشیه باید از عنصر والدی به ارث برده شود.

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

مثال زیر حاوی مقادیر مختلف برای margins  در هر چهار طرف یک عنصر<p>  است:

مثال:

 

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

آموزش Margins (مارجین) درhtml/بخش هفتم- آموزش Margins در CSS

 

 کدنویسی کوتاه برای margins

برای کوتاه کردن کد، می توان تمام خصوصیات مختلف برای مارجین را در یک ویژگی گنجاند.

ویژگی margin یک ویژگی مختصر برای خصوصیات مارجینی زیر است:

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

در اینجا نحوه انجام  این کار را خواهید دید:

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

مارجین: ۲۵px 50px 75px 100px؛

مارجین بالایی ۲۵ پیکسل است.

مارجین راست ۵۰ پیکسل است.

مارجین پایین ۷۵ پیکسل است.

مارجین سمت چپ ۱۰۰ پیکسل است.

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

مثال:

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

آموزش Margins (مارجین) درhtml/بخش هفتم- آموزش Margins در CSS

 

اگر بخواهیم ویژگی مارجین دارای سه مقدار باشد:

مارجین: ۲۵px  ۵۰px  ۷۵px؛

مارجین بالای ۲۵ پیکسل است

مارجین راست و چپ ۵۰ پیکسل است

مارجین پایین ۷۵ پیکسل است

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

مثال:

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

آموزش Margins (مارجین) درhtml/بخش هفتم- آموزش Margins در CSS

 

اگر بخواهیم ویژگی مارجین دارای دو مقدار باشد:

مارجین : ۲۵px 50px؛

مارجین بالا و پایین ۲۵ پیکسل است

مارجین راست و چپ ۵۰ پیکسل است

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

مثال:

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

آموزش Margins (مارجین) درhtml/بخش هفتم- آموزش Margins در CSS

 

اگر ویژگی مارجین دارای یک مقدار باشد:

مارجین: ۲۵ پیکسل؛

تمام چهار حاشیه ۲۵ پیکسل است

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

مثال:

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

آموزش Margins (مارجین) درhtml/بخش هفتم- آموزش Margins در CSS

 

auto Value

شما می توانید ویژگی Margins را به صورت اتوماتیک تنظیم کنید تا عنصر را در جای مخصوص خود به صورت افقی قرار دهید. سپس عنصر عرض مشخص شده را می گیرد و فضای باقیمانده به طور مساوی بین حاشیه های چپ و راست تقسیم می شود:

مثال:

با اجرای کد بالا می توانید تصویر زیر را در خروجی ببینید:

آموزش Margins (مارجین) درhtml/بخش هفتم- آموزش Margins در CSS

 

inherit Value

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

مثال:

با اجرای کد بالا می توانید تصویر زیر را در خروجی ببینید:

آموزش Margins (مارجین) درhtml/بخش هفتم- آموزش Margins در CSS

 

سقوط حاشیه (Margins Collapse)

مارجین های بالا و پایین عناصر گاهی به یک مارجین واحد تقسیم می‌شوند که برابر با بزرگ‌ترین در بین دو مارجین است .

البته این مسئله در مارجین چپ و راست اتفاق نمی افتد! تنها مارجین های بالا و پایین!

مثال:

 

با اجرای کد بالا می توانید تصویر زیر را در خروجی ببینید:

آموزش Margins (مارجین) درhtml/بخش هفتم- آموزش Margins در CSS

 

در مثال بالا، عنصر <h1> دارای مارجین پایین ۵۰ پیکسل است و عنصر <h2> دارای مارجین بالای ۲۰px می باشد.

به نظر می رسد حس مشترک نشان می دهد حاشیه عمودی بین <h1> و <h2> در مجموع ۷۰px (50px + 20px) است. اما با توجه به سقوط حاشیه، حاشیه واقعی به ۵۰ پیکسل می رسد.

 

بخش هفتم- آموزش Margins در CSS

لطفا امتیاز بدهید



منبع مطلب

این مطالب را نیز ببینید!

بخش نوزدهم- آموزش عرض و حداکثر عرض در CSS یا آموزش CSS Layout

بخش نوزدهم- آموزش عرض و حداکثر عرض در CSS یا آموزش CSS Layout

CSS Layout – عرض و حداکثر عرض  استفاده از width, max-width and margin: auto همانطور …

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *