جلسه هشتمcss - مارجین (margin)

مارجین:

فرض کنید که دو المان در صفحه دارید که می‌خواهید فاصله ۵۰ پیکسلی بین آن‌ها بیندازید. مثلا دو div با ابعاد طول و عرض ۱۰۰  در ۱۰۰ پیکسل داریم که می خواهیم از هم فاصله ۵۰ پیکسلی داشته باشند.  در این جور مواقع است که مارجین به کمک می‌آید. مارجین در واقع فاصله بین دو المان است.

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

نحوه‌ی اضافه کردن مارجین حول و حوش یک المان:

حالت اول:‌ هر المان می‌تواند در هر چهار جهت دارای یک فاصله‌ی مشخص باشد. اگر بخواهید دور تا دور یک المان، یعنی در هر چهار جهت فاصله یکسان و مساوی بیندازید، تنها کافیست تا کلمه مارجین را نوشته و روبروی آن عدد مورد نظر بر حسب پیکسل بنویسید. بدین ترتیب این فاصله به هر چهار طرف اعمال می‌شود. (حتما دقت کنید که کلمه px که همان واحد فاصله بر حسب پیکسل است را در کنار عدد مربوط به مارجین یا هر عدد دیگر در سی اس اس بنویسید.)

 

• نام: margin
• این ویژگی چه کاری انجام می‌دهد؟‌  با کمک این ویژگی می‌توانید بین المان‌های اچ تی ام ال فاصله ایجاد کنید. 
• چه چیزهایی را در مقابلش بنویسیم؟  فاصله بر حسب px.
• نمونه نوشتن این دستور: margin:20px 

 

در مثال زیر ما ابتدا حالت بدون مارجین را برای دو المان بررسی ٰکرده‌ایم. همانطور که می‌بینید در حالت بدون مارجین المان‌ها به هم چسبیده‌اند و از اطراف نیز در یک فاصله‌ی مشخص و مساوی قرار دارند.

HTML

<div class="red"> </div>

<div class="blue"></div> 

CSS

.red {
 margin: 0px;

bacground-color: red;

width:30px;

height:30px;

}

.blue{
  margin: 0px;

bacground-color: blue;

width:30px;

height:30px;
}

آبی و قرمز -المان‌های بدون مارجین

 

 

 

حالا برای درک بهتر مارجین به مثال زیر نگاه کنید. در این حالت به المان قرمز ما یک مارجین ۵۰ پیکسلی داده‌ایم.

HTML

<div class="red"> </div>

<div class="blue"></div> 

CSS

.red {
    margin: 50px;bacground-color: red;

width:30px;

height:30px;

}

.blue{
  margin: 0px;

bacground-color: blue;

width:30px;

height:30px;
}

آبی و قرمز - المان قرمز دارای مارجین است

 

 

 

همانطور که مشاهده می‌کنید، در این حالت المان قرمز که ۵۰ پیکسل مارجین دارد از هر چهار طرف به اندازه ۵۰ پیکسل فاصله گرفته است و بدین ترتیب از المان آبی نیز به اندازه ۵۰ پیکسل فاصله گرفته است.

حالت دوم: اگر روزی روزگاری بخواهید سمت چپ یک المان را با فاصله ۵۰ پیکسلی از المان‌های مجاور قرار دهید و سمت راست را  ۱۰۰ پیکسل از المان‌های دور و بری فاصله دهید،‌ آن وقت باید چه کار کرد؟ برای این کار می‌توانید مارجین را در جهت‌های چپ راست بالا و پایین به صورت جداگانه و با مقادیر مختلف اعمال کنید. بدین ترتیب المان شما از جهت‌های مختلف به مقدارهای دلخواه فاصله می‌گیرد. البته اجباری برای ایجاد فاصله از هر چهار طرف نیست و شما می‌توانید تنها در یک جهت به المان‌هایتان فاصله بدهید. مثال زیر را نگاه بیندازید تا بهتر متوجه منظورمان شوید. 

HTML

<div >

<p class="withMargin">المان دارای مارجین‌های مختلف در جهات مختلف است</p>

</div> 

<div>

   <p>المان بدون مارجین است</p>

</div>

 

CSS

div {

width: 150px; 

height: 150px;

border: 1px solid black;

margin-bottom: 40px;

}

withMargin  {
    margin-top: 30px;
    margin-bottom: 40px;
    margin-right: 20px;
    margin-left: 50px;
}

المان دارای مارجین‌های مختلف در جهات مختلف است

المان بدون مارجین در جهات مختلف است

 

همانطور که مشاهده کردید، پاراگرافی که در مستطیل اول قرار دارد، در جهات مختلف دارای مارجین‌های متفاوت است و به همین جهت از هر طرف یک فاصله می‌گیرد. البته این مثال تنها جهت درک بهتر مارجین آورده شده است و در این جور مواقع می توان از پدینگ نیز بهره برد. (به این موضوع در جلسات بعدی خواهیم پرداخت)

نکته‌ی مهم: در این حالت ناچار نیستید که تمامی جهت‌ها را مشخص کنید. برای مثال می‌توانید تنها در جهت مشخص چپ فاصله بیندازید که در این صورت باقی جهات به صورت پیش‌فرض مشخص خواهند شد. مثلا ما در مثال بالا به المان div که در دل خود یک پاراگراف جای داده است، مارجین از پایین داده‌ایم تا از div پایینی فاصله داشته باشد. اگر این کار را نمی‌کردیم دو div مستطیلی ما به هم می‌چسبیدند. 

یک میانبر ساده: برای کوتاه کردن نوشته‌ها،‌ همیشه راه‌حل‌هایی وجود دارد که کار طراح را خلاصه‌تر می‌کند.  راه حل خلاصه کردن مارجین  نیز به این صورت است که شما یک بار کلمه margin را می‌نویسید و در جلوی آن چهار عدد بر حسب پیکسل یادداشت می‌کنید. این اعداد به ترتیب فاصله نسبت به المان بالا، فاصله نسبت به المان راست، فاصله نسبت به المان پایین، فاصله نسبت به المان چپ محسوب می‌شود. همچنین اگر در یکی از این بخش‌ها چیزی ننویسید به صورت پیش‌فرض صفر در نظر گرفته می‌شود.

p {
    margin: 100px 50px 10px 20px;
} 

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

p {
    margin -top: 100px;

   margin -right:50px;

  margin-bottom:10px;

  margin-left: 20px;
}

نکته: مارجین را می‌توانید به تمامی المان‌های اچ تی‌ ام ال اعمال کنید. 

تمرین: دو متن و دو جعبه‌ی مستطیلی ایجاد کنید و بین دو جعبه فاصله ۱۰۰ پیکسلی و بین متن‌ها فاصله ۲۰۰ پیکسلی بیندازید.