تنظیم فاصله عناصر از یکدیگر توسط دستور margin در CSS

نظم در صفحات وب موجب چیدمان بهتر و خوانایی بیشتر محتوای سایت شما می شود که همین امر در جذب مخاطب بیشتر تأثیر بسزایی دارد. به وسیله خاصیت margin می توان فاصله یک عنصر را از چهار جهت با سایر عناصر تنظیم نمود.

نحوه استفاده

دو روش کلی برای استفاده از این خاصیت جهت تنظیم فاصله ها وجود دارد روش اول مقدار دهی فاصله های به تفکیک جهت می باشد که به چهار حالت قابل استفاده است:

  • margin-top: فاصله از بالا.
  • margin-right: فاصله از راست.
  • margin-bottom: فاصله از پایین.
  • margin-left: فاصله از چپ.
<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
      div{
        width: 200px;
        height: 200px;
        background-color: purple;
        margin-top: 100px;
        margin-left: 100px;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

با اجرای صفحه فوق مشاهده خواهید نمود که div مورد نظر از سمت چپ و بالای صفحه به اندازه 100px فاصله خواهد داشت.

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

  • تعیین یک مقدار: در این صورت، مقدار تعیین شده در هر چهار جهت اعمال می گردد.
  • تعیین دو مقدار: مقدار اول برای فاصله از بالا و پایین و مقدار دوم برای فاصله چپ و راست اعمال می گردد.
  • تعیین چهار مقدار: مقادیر تعیین شده به ترتیب از بالا به صورت ساعتگرد اعمال می شود.
div{
  width: 200px;
  height: 200px;
  background-color: purple;
  margin:50px 20px;
}

در کدهای فوق برای div مورد نظر از بالا و پایین 50px و از چپ و راست 20px فاصله اعمال خواهد شد.

یکی از تکنیک های مهم و پرکاربرد قرار دادن یک div از نظر افقی در مرکز صفحه می باشد. چالش بزرگ پیش رو آن است که ما نمی دانیم عرض صفحه چقدر می باشد! در چنین مواقعی می توان برای جهت های چپ و راست، مقدار auto را در نظر گرفت که به وسیله آن، فاصله عنصر از سمت چپ و راست صفحه به یک میزان خواهد بود و همین امر باعث می شود، عنصر مورد نظر در مرکز صفحه (از نظر افقی) قرار گیرد.

div{
  width: 200px;
  height: 200px;
  background-color: purple;
  margin: 0px auto;
}

مثال: کادری با عرض 800 و ارتفاع 600 ایجاد کنید که دارای بک گراند خاکستری روشن و حاشیه مشکی باشد، همچنین این کادر از نظر افقی در مرکز صفحه باشد.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
      div{
        width: 800px;
        height: 600px;
        background-color: lightgray;
        margin: 10px auto;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>