آموزش CSS - حاشیه از بیرون (Margins)

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

ویژگی های برای تنظیم مرز عنصر :

(مرز بالا) margin-top
(مرز پایین) margin-bottom
(مرز چپ) margin-left
(مرز راست) margin-right
(مرز های 4طرف) margin

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

ویژگی مرز (Margin Property):

(ویژگی مرز) margin به شما این اجازه را می دهد که تمام ویژگی های مرز برای چهار جهت تعیین کنید. اینجا نحوه تعیین مرز دور یک پاراگراف را مشاهده می کنید :

<html>
   <head>
   </head>
   
   <body>
      <p style = "margin: 15px; border:1px solid black;">
      هر چهار حاشیه خواهد بود px15
      </p>
      
      <p style = "margin:10px 2%; border:1px solid black;">
        حاشیه بالا و پایین 10 پیکسل، حاشیه چپ و راست 2 درصد خواهد بود.
      از عرض کل سند
      </p>
      
      <p style = "margin: 10px 2% -10px; border:1px solid black;">
        حاشیه بالا 10 پیکسل، حاشیه چپ و راست 2 درصد خواهد بود
      عرض کل سند، حاشیه پایین 10- پیکسل خواهد بود
      </p>
      
      <p style = "margin: 10px 2% -10px auto; border:1px solid black;">
        حاشیه بالا 10 پیکسل، حاشیه سمت راست 2٪ از کل خواهد بود 
        عرض سند، حاشیه پایین 10- پیکسل خواهد بود، حاشیه سمت چپ
         توسط مرورگر تنظیم خواهد شد
      </p>
   </body>
</html>

ویژگی مرز-پایین( margin-bottom) :

(ویژگی مرز پایین) margin-bottom به شما اجازه می دهد مرز پایین یک عنصر را تنظیم کنید. این می تواند مقداری در طول، درصد یا auto داشته باشد.

<html>
   <head>
   </head>

   <body>
      <p style = "margin-bottom: 15px; border:1px solid black;">
        این پاراگراف با حاشیه پایین مشخص شده است
      </p>
      
      <p style = "margin-bottom: 5%; border:1px solid black;">
        این پاراگراف دیگری با حاشیه پایین مشخص شده بر حسب درصد است
      </p>
   </body>
</html>

ویژگی مرز-بالا (margin-top) :

(ویژگی مرز بالا) margin-top به شما اجازه می دهد مرز بالای یک عنصر را تنظیم کنید. این می تواند مقداری در طول، درصد یا auto داشته باشد.

<html>
   <head>
   </head>

   <body>
      <p style = "margin-top: 15px; border:1px solid black;">
        این پاراگراف با حاشیه بالا مشخص شده است
      </p>
      
      <p style = "margin-top: 5%; border:1px solid black;">
        این پاراگراف دیگری با حاشیه بالا مشخص شده بر حسب درصد است
      </p>
   </body>
</html>

ویژگی مرز-چپ (margin-left) :

(ویژگی مرز چپ) margin-left به شما اجازه می دهد مرز چپ یک عنصر را تنظیم کنید. این می تواند مقداری در طول، درصد یا auto داشته باشد.

<html>
   <head>
   </head>

   <body>
      <p style = "margin-left: 15px; border:1px solid black;">
       این یک پاراگراف با حاشیه سمت چپ مشخص است
      </p>
      
      <p style = "margin-left: 5%; border:1px solid black;">
         این پاراگراف دیگری با حاشیه بالا مشخص شده بر حسب درصد است
      </p>
   </body>
</html>

ویژگی مرز-راست (margin-right)

(ویژگی margin-right) به شما اجازه می دهد مرز-راست یک عنصر را تنظیم کنید. می تواند مقداری به طول، درصد یا خودکار داشته باشد.

<html>
   <head>
   </head>
   
   <body>
      <p style = "margin-right: 15px; border:1px solid black;">
         این پاراگراف با حاشیه سمت راست مشخص شده است
      </p>
      <p style = "margin-right: 5%; border:1px solid black;">
        این پاراگراف دیگری با حاشیه راست مشخص شده بر حسب درصد است
      </p>
   </body>
</html>

مرزبندی(Border) - درس قبلی

درس بعدی - لیست ها