margin

ویژگی margin از ویژگی های مختصر نویسی می باشد که می توان بوسیله آن چهار ویژگی margin-top، margin-right، margin-bottom و margin-left را در یک اعلان تعیین کرد.

قبل از بررسی این ویژگی باید با Box Model در سی اس اس آشنا باشیم تا نواحی مختلف هر عنصر را بشناسیم.

margin باعث می شود تا بتوانیم بین عنصر و اطرافش فاصله ایجاد کنیم. مثلا اگر نیاز داریم تا لبه سمت راست عنصر با هرآنچه که در سمت راست آن است 100 پیکسل فاصله داشته باشد کافی است از margin استفاده کنیم.

 

مقادیر ویژگی margin

این ویژگی می تواند یک، دو، سه و یا چهار مقدار داشته باشد. که حالت های مختلف به شرح زیر می باشند:

زمانی که چهار مقدار دارد مقادیر در جهت عقربه های ساعت می توانند به خاطر سپرده شوند. اولین مقدار سمت بالا و آخرین مقدار سمت چپ:

 


margin: 10px 20px 10px 0;
margin: top right bottom left;

 

زمانی که سه مقدار وجود دارد مقدار اول بالا، مقدار دوم مربوط به سمت راست و چپ و مقدار سوم مربوط به پایین باشد:

 


margin: 10px 10px 20px;
margin: top left/right bottom;

 

در حالتی که دو مقدار وجود دارد مقدار اول مربوط به بالا و پایین و مقدار دوم مربوط به سمت راست و چپ می باشد

 


margin: 10px auto;
margin: top/bottom left/right;

 

و در آخر زمانی که یک مقدار برای ویژگی margin تعیین می کنیم، این مقدار مربوط به چهار سمت عنصر خواهد بود:

 


margin: 10px;
margin: top/bottom/left/right;

 

 

مقدار طولی

به کمک واحدهای مطلق و نسبی می توان به این ویژگی مقدار داد.

 


margin: 100px;
margin: 4rem;
margin: 10vh;
margin: 100cm;

 

مقدار اولیه این ویژگی 0 است به این معنی که هیچ فاصله خارجی به صورت پیشفرض برای عنصر وجود ندارد.

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

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

  • <h1>
  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h6>
  • <figure>
  • <ul>
  • <ol>
  • <menu>

 

مقدار درصدی

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

 


.dad {
  width: 100px;
}

.dad .boy {
  margin: 10%; /* 10px */
}

 

 

auto

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

توجه داشته باشیم در حالت عادی (زمانی که عنصر از نوع بلاک است) فقط عنصری که width آن مقدار ثابتی باشد می تواند در وسط قرار بگیرد.

 


width: 150px;
margin: 10px auto 0;

 

در این مثال فاصله خارجی عنصر از بالا 10 پیکسل و از پایین برابر صفر است و مقدار auto برای سمت چپ و راست بصورت زیر عمل می کند:

همیشه در خاطر داشته باشید زمانی که از auto برای این ویژگی استفاده می کنیم این کلمه کلیدی باعث می شود تا عنصر تا جایی که امکان دارد به یک سمت حول داده شود. مثلا اگر برای سمت راست عنصر این مقدار را تعیین می کنیم عنصر تاجایی که امکان دارد به سمت چپ حول داده می شود. حال فرض کنید عنصری عرض ثابت دارد و ما از هر دو سمت چپ و راست بصورت برابر عنصر را حول بدهیم نتیجه چه خواهد بود؟

چون نیروها برابرند عنصر در وسط قرار خواهد گرفت.

نکته مهم اینکه در شرایط عادی عنصر را نمی توان بوسیله این مقدار در وسط راستای عمود قرار داد. برای بررسی بیشتر موضوع وسط قرار دادن عناصر به مطلب مربوط به آن مراجعه کنید.

 

inherit

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

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

 
در مثال اول دموی زیر عنصر داخلی از هر جهت دارای فاصله خارجی می باشد. در مثال دوم عنصر توسط این ویژگی در مرکز قرار گرفته است و در مثال آخر عنصر با استفاده از فاصله خارجی منفی توانسته است از عنصر نگهدانده اش خارج شود. دمو را بررسی کنید و با تغییر مقادیر و واحدها به درک موضوع کمک کنید.

 

See the Pen margin by Mojtaba Seyedi (@seyedi) on CodePen.


 

 

چند نکته

⚠ در سی اس اس یک اصطلاح وجود داد که به آن margin collapsing گفته می شود. این اتفاق معمولا زمانی می افتد که می خواهیم دو عنصر که زیر هم قرار دارند را توسط margin از هم دور کنیم.

برای این کار شاید به margin-bottom عنصر بالا و به margin-top عنصر پایین مقادیری اختصاص دهیم. فرض کنید به عنصر اول مقدار 30 پیکسل و به عنصر دوم مقدار 20 پیسکل می دهیم. حال باید فاصله بین این دو عنصر در راستای عمود برابر با 50 پیکسل باشد:

 


.first {
  margin-bottom: 30px;
}

.second {
  margin-top: 20px;
}

 

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

 

margin collapsing
margin collapsing

 

توجه داشته باشید که این اتفاق فقط در راستای عمودی برای عناصر می افتد و نه در راستای افقی.

 

⚠ در حالت عادی اگر فاصله ای بین عنصر فرزند و نگهدارنده نباشد اگر margin-top برای فرزند در نظر بگیرید به درستی عمل نمی کند. یعنی باعث می شود که پدر عنصر نیز با آن به سمت پایین حرکت کند. در واقع انگار این دو عنصر به هم چسبیده اند.

برای جلوگیری از این کار باید بین آنها یک فاصله هر چند یک پیکسلی باشد تا فرزند از عنصر نگهدارنده کنده شود. که می توان آن فاصله را با استفاده از padding-top: 1px برای عنصر نگهدارنده بوجود آورد که روش جالبی نیست.

 

مشکل margin عمودی فرزند
 

به عنوان یک روش صحیح می توانیم با استفاده از شبه عنصر before:: و تعیین display از نوع table برای آن و اعمال این موارد به عنصر نگهدارنده به نتیجه مشابه برسیم. که این روش هیچ اثر جانبی نخواهد داشت.

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

 


.parent::before {
  content: ' ';  
  display: table;
}

.parent .child {
  margin-top: 10px;  
}

 

3 دیدگاه برای “margin

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