صفات Margin در CSS

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


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

این عنصر دارای margin ایی با مقدار 70 پیکسل است.


صفات Margin در CSS

از صفت margin در زبان CSS برای تولید فضا در اطراف عناصر HTML استفاده میشود.

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

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


Margin - تنظیم مقدار صفت margin برای هر سمت به طور جداگانه

زبان CSS دارای صفاتی است که میتوان مقدار margin را برای هر سمت از یک عنصر HTML تنظیم کرد. این صفات عبارت اند از :

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

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

  • auto - در این حالت مرورگر مقدار margin را محاسبه میکند.
  • اندازه - در این حالت مقدار صفات margin توسط اندازه هایی در واحد های پیکسل، سانتیمتر و ... مشخص میشود. 
  • % - در این حالت مقدار margin با استفاده از درصدی از پهنای عنصر مورد نظر مشخص میشود.
  • inherit - مقداردهی صفات margin با مقدار inherit به معنای این است که مقدار margin از عنصر پدرش به ارث برده میشود.

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

در نمونه مثال زیر مقدار margin برای هر چهار سمت یک عنصر پاراگراف مقدار دهی شده است :

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}
خودتان امتحان کنید

Margin - صفت کوتاه شده

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

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

که کوتاه نویسی آن به شکل زیر است :

p {
    margin: 100px 150px 100px 80px;
}
خودتان امتحان کنید

و اما مثال بالا چطور کار میکند :

اگر صفت margin دارای چهار مقدار باشد :

margin: 25px 50px 75px 100px;
  • margin بالایی دارای مقدار 25 پیکسل است
  • margin سمت راست دارای مقدار 50 پیکسل است
  • margin پایینی دارای مقدار 75 پیکسل است
  • margin سمت چپ دارای مقدار 100 پیکسل است

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

margin: 25px 50px 75px;
  • margin بالایی دارای مقدار 25 پیکسل است
  • margin های سمت راست و چپ دارای مقادیر 50 پیکسل هستند
  • margin پایینی دارای مقدار 75 پیکسل است

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

margin: 25px 50px;
  • margin های بالا و پایین دارای مقدار 25 پیکسل هستند
  • margin های سمت راست و چپ دارای مقدار 50 پیکسل هستند

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

margin: 25px;
  • هر چهار margin دارای مقدار 25 پیکسل هستند

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

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

در این حالت عنصر مقداری فضا را اشغال میکند و باقی مانده فضا به صورت مساوی بین margin سمت راست و چپ تقسیم میشود. در مثال زیر نمونه ای از مقدار دهی صفت margin با مقدار auto آورده شده است :

div {
    width: 300px;
    margin: auto;
    border: 1px solid red;
}
خودتان امتحان کنید

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

در نمونه مثال زیر مقدار margin سمت چپ از عنصر پدر ارث بری کرده است :

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

p.one {
    margin-left: inherit;
}
خودتان امتحان کنید

تقلیل پیدا کردن مقدار margin

گاهی اوقات margin های پایینی و بالایی عناصر به یک margin تقلیل پیدا میکنند که معادل است با بزرگترین margin از بین دو صفت margin.

این مورد برای margin های سمت راست و چپ اتفاق نمی افتد! و تنها برای margin های بالایی و پایینی امکان پذیر است. به مثال زیر دقت کنید :

h1 {
    margin: 0 0 50px 0;
}

h2 {
    margin: 20px 0 0 0;
}
خودتان امتحان کنید

در نمونه مثال بالا عنصر <h1> دارای margin پایینی با مقدار 50 پیکسل است. مقدار margin بالایی برای عنصر <h2> هم با مقدار 20 پیکسل مقدار دهی شده است.

در این حالت اولین چیزی که به نظر میرسد این است که فاصله عمودی بین <h1> و <h2> باید مجموع دو مقدار 50 و 20 یعنی مقدار 70 پیکسل باشد. اما با توجه به قانون تقلیل margin ها ، فاصله واقعی بین این دو عنصر برابر با بزرگترین margin از بین آنها یعنی مقدار 50 پیکسل است.


تمام صفات margin در CSS

    صفت     توضیح
    margin     صفت کوتاه شده برای تنظیم margin در یک اعلان
    margin-bottom     تنظیم margin پایینی از یک عنصر
    margin-left     تنظیم margin سمت چپ از یک عنصر
    margin-right     تنظیم margin سمت راست از یک عنصر
    margin-top     تنظیم margin بالایی از یک عنصر

 

منتشر شده در ۲۳ تیر ۱۳۹۶ حمید رضا ملکی ۶۹۱ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده