صفات Margin در CSS

همانطور که در شکل زیر مشاهده میکنید عنصر مورد نظر به مقدار 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