مارجین (Margin) در CSS

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

حال می‌خواهیم بدانیم برای دادن مارجین باید از چه دستوری استفاده کنیم؟ عناصر را می‌توان از هر چهار طرف مارجین داد. یعنی می‌توانیم از سمت بالا، راست، پایین و یا چپ مارجین‌های مختلفی دهیم.

برای این کار می‌توانیم از دستورات زیر استفاده کنیم:

• margin-top:   px ;
• margin-right:   px ;
• margin-bottom:   px ;
• margin-left:   px ;

به عنوان مثال پاراگراف زیر به اندازه ی 30px از سمت راست فاصله می‌گیرد:

P{

background-color: pink;

margin-right: 30px ;

}

نکته ی بسیار مهمی‌که وجود دارد این است که مارجین‌ها علاوه‌بر مقادیر مثبت، می‌توانند مقادیر منفی را هم اتخاذ کنند. واضح است که اگر به یک عنصر مقدار مارجین را مثبت دهیم، به همان اندازه عناصر را از خود دور می‌کند ولی اگر مقدار منفی بدهیم به آن اندازه عناصر را به خود نزدیک می‌کند.

همان طور که در بخش border‌ها می‌توانستیم از دستورات خلاصه شده استفاده کنیم، در بخش مارجین‌ها هم می‌توانیم برای بهینه کردن کدنویسی، چند دستور مربوط به مارجین را در یک عنصر خلاصه کنیم.مثال:

P{

background-color: pink;

margin: 10px 30px 40px 20px ;

}

این پاراگراف 10px از سمت بالا ، 30px از سمت راست، 40px از سمت پایین و 20px از سمت چپ از محیط اطرافش فاصله می‌گیرد. توجه کنید در اطراف یک عنصر ممکن است عنصر‌های دیگری وجود داشته باشد و یا اینکه هیچ عنصری نباشد.

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

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

خطای فروریختگی margin

فرض کنید به یک عنصری مارجین پایین 40px داده‌ایم و سپس به عنصری که در زیر آن عنصر وجود دارد مارجین بالایی برابر با 60px داده‌ایم. حال یک سوال پیش می‌آید، اینکه مارجین بین این دو عنصر چقدر خواهد بود؟ در چنین شرایطی همیشه مارجین بزرگ‌تر اعمال خواهد شد. یعنی در این مثال مارجین بین دو عنصر 60px است. توجه کنید که این موضوع تنها برای مارجین‌های بالا و پایین است و برای مارجین راست و چپ اتفاق نمی‌افتد.