تعیین حاشیه المان ها در CSS – ویژگی margin

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

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

نحوه تعیین حاشیه یا فضای خالی پیرامون المان با کمک ویژگی margin در CSS

برای تعیین همزمان حاشیه های پیرامون المان ها در CSS کافیست مشابه با نمونه زیر مقدار مناسبی برای ویژگی margin مشخص کنید:

h2 {
  margin: 5px;
  border: 3px solid red;
  background-color: #6666da;
}

مقدار 5px برای این ویژگی در قانون CSS فوق باعث می‌شود به اندازه 5 پیکسل حاشیه پیرامون المان‌های <h2> ایجاد شود. مقدار 3px solid red برای ویژگی border نیز باعث می‌شود چهار خط مرزی پیرامون المان‌های <h2> با پهنای 3 پیکسل، به صورت یکپارچه و با رنگ قرمز رسم شود. رنگ زمینه المان نیز با کد هگز #6666da برای ویژگی background-color مشخص شده است.

با فرض قانون زیر برای المان های <h1> و <h3>، این المان ها بدون حاشیه خواهند بود:

h1, h3 {
  margin: 0;
  border: 3px solid #005618;
  background-color: #6666da;
}

در تصویر زیر می‌توانید حاشیه پیرامون المان <h2> را بین دو المان <h1> و <h3> با وجود قوانین فوق مشاهده کنید:

همانطور که در تصویر فوق می‌بینید بین خط مرزی المان <h2> در لبه های بالا و پایین از المان های <h1> و <h3> فاصله‌ای وجود دارد. این فاصله همان 5 پیکسل حاشیه است. فاصله خالی سمت راست و چپ این المان نیز همین میزان حاشیه را نمایش می‌دهد.

برای ویژگی margin در CSS می‌توانید یک، دو، سه یا چهار مقدار از میان مقادیر مجاز برای حاشیه مشخص کنید:

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

مقادیر متداول قابل استفاده برای ویژگی margin

• طول: درج مقدار همراه با واحد طول نظیر px (پیکسل), cm (سانتی متر), pt (پوینت)، em و … برای این ویژگی، یکی از روش‌های رایج برای تعیین میزان حاشیه است. برای مثال مقدار 5px و 2em.
• درصد: درج مقدار برحسب درصد برای ویژگی margin، حاشیه المان را به صورت درصدی از پهنای بلوکی که المان را دربرگرفته مشخص می‌کند. برای مثال مقدار 50%.
• auto: این مقدار باعث می‌شود مرورگر میزان حاشیه المان را تعیین کند. در برخی موارد، از مقدار auto برای قرار دادن یک المان در وسط المان والد به صورت افقی استفاده می‌شود.

نکته: شما می‌توانید برای ویژگی margin از مقادیر منفی نیز استفاده کنید. چنین مقادیری باعث می‌شوند المان نسبت به حالت عادی به المان های اطرافش نزدیک‌تر شود.

نکته: به طور مشابه از مقادیر مجاز فوق می‌توانید برای تعیین حاشیه یکی از لبه ها توسط ویژگی‌های margin-top, margin-right, margin-bottom و margin-left استفاده کنید.

چند مثال تکمیلی برای تعیین margin المان در CSS

توجه: در تمامی مثال‌های این مطلب، استایل مورد استفاده برای المان های <h1> و <h3> مطابق با مثال قبلی است.

مثال زیر نمونه‌ای از تعیین حاشیه یا margin المان در CSS با کمک دو مقدار را نمایش می‌دهد:

h2 {
  margin: 0 10px;
  border: 3px solid red;
  background-color: #6666da;
}

به این ترتیب لبه های بالا و پایین المان‌های <h2> بدون حاشیه و حاشیه های راست و چپ برابر با 10 پیکسل خواهد بود:

مثال زیر هم نمونه‌ای سه مقداری برای این ویژگی را نمایش می‌دهد:

h2 {
  margin: 0 10px 5%;
  border: 3px solid red;
  background-color: #6666da;
}

با توجه به سه مقدار فوق برای ویژگی margin، لبه بالایی المان‌های <h2> بدون حاشیه، لبه های راست و چپ با حاشیه 10 پیکسل و لبه پایینی نیز با حاشیه‌ای برابر 5 درصد پهنای المان دربرگیرنده‌اش خواهد بود:

در مثال زیر نیز چهار مقدار برای این ویژگی درج شده است:

h2 {
  margin: 0 10px 5% 0;
  border: 3px solid red;
  background-color: #6666da;
}

با توجه به چهار مقدار فوق برای ویژگی margin، لبه بالایی المان‌های <h2> بدون حاشیه، لبه راست با حاشیه 10 پیکسل، لبه پایین با حاشیه‌ای برابر 5 درصد پهنای المان دربرگیرنده‌اش و لبه چپ نیز بدون حاشیه خواهند بود:

نحوه قرار دادن یک المان در مرکز المان والد به صورت افقی

شما می‌توانید از مقدار auto برای قرار دادن یک المان در وسط یا مرکز المان والدش (به صورت افقی) استفاده کنید. برای این منظور کافیست از ویژگی margin با دو مقدار که مقدار دوم آن برابر auto باشد استفاده کنید. (از این روش معمولا به منظور قرار دادن یک المان در مرکز المان والد برای سازگاری با مرورگرهای قدیمی استفاده می‌شود که از لی‌آوت Flexible Box پشتیبانی نمی‌کنند). مثال زیر را در نظر بگیرید:

h2 {
  margin: 0 auto;
  width: 250px;
  border: 3px solid red;
  background-color: #6666da;
}

در این مثال المان <h2> دارای پهنای 250 پیکسل خواهد بود. با توجه به margin: 0 auto; فضای افقی باقیمانده به صورت مساوی به عنوان حاشیه های راست و چپ درنظر گرفته می‌شود و به این ترتیب المان <h2> در مرکز قرار می‌گیرد. لبه های بالا و پایین هم حاشیه صفر خواهند داشت:

بازگشت به فهرست مجموعه آموزشی CSS