CSS - Margins - 極客書

margin屬性定義HTML元素周圍的空間。可以使用負值重疊內容。

margin屬性的值不是由子元素繼承的。請記住，相鄰的垂直邊距（上邊距和下邊距）將相互摺疊，因此塊之間的距離不是邊距的總和，而是兩個邊距中的較大者，或者如果兩個邊距相等，則與一個邊距的大小相同。

我們有以下屬性來設置元素邊距。

邊距指定一個速記屬性，用於在一個聲明中設置邊距屬性。
邊距底部指定元素的底部邊距。
margin top指定元素的上邊距。
左邊距指定元素的左邊距。
右邊距指定元素的右邊距。

現在，我們將通過示例了解如何使用這些屬性。

The Margin Property

margin屬性允許您在一個聲明中設置四個margin的所有屬性。下面是設置段落邊距的語法−

下面是一個例子;

Live Demo

<html>
   <head>
   </head>
   
   <body>
      <p style = "margin: 15px; border:1px solid black;">
         all four margins will be 15px
      </p>
      
      <p style = "margin:10px 2%; border:1px solid black;">
         top and bottom margin will be 10px, left and right margin will be 2% 
         of the total width of the document.
      </p>
      
      <p style = "margin: 10px 2% -10px; border:1px solid black;">
         top margin will be 10px, left and right margin will be 2% of the 
         total width of the document, bottom margin will be -10px
      </p>
      
      <p style = "margin: 10px 2% -10px auto; border:1px solid black;">
         top margin will be 10px, right margin will be 2% of the total 
         width of the document, bottom margin will be -10px, left margin 
         will be set by the browser
      </p>
   </body>
</html>

它將產生以下結果&負;

The margin-bottom Property

margin bottom屬性允許您設置元素的下邊距。它可以有一個長度值，%或auto。

下面是一個例子;

Live Demo

<html>
   <head>
   </head>

   <body>
      <p style = "margin-bottom: 15px; border:1px solid black;">
         This is a paragraph with a specified bottom margin
      </p>
      
      <p style = "margin-bottom: 5%; border:1px solid black;">
         This is another paragraph with a specified bottom margin in percent
      </p>
   </body>
</html>

它將產生以下結果&負;

The margin-top Property

margin top屬性允許您設置元素的上邊距。它可以有一個長度值，%或auto。

下面是一個例子;

Live Demo

<html>
   <head>
   </head>

   <body>
      <p style = "margin-top: 15px; border:1px solid black;">
         This is a paragraph with a specified top margin
      </p>
      
      <p style = "margin-top: 5%; border:1px solid black;">
         This is another paragraph with a specified top margin in percent
      </p>
   </body>
</html>

它將產生以下結果&負;

The margin-left Property

margin left屬性允許您設置元素的左邊距。它可以有一個長度值，%或auto。

下面是一個例子;

Live Demo

<html>
   <head>
   </head>

   <body>
      <p style = "margin-left: 15px; border:1px solid black;">
         This is a paragraph with a specified left margin
      </p>
      
      <p style = "margin-left: 5%; border:1px solid black;">
         This is another paragraph with a specified top margin in percent
      </p>
   </body>
</html>

它將產生以下結果&負;

The margin-right Property

margin right屬性允許您設置元素的右邊距。它可以有一個長度值，%或auto。

下面是一個例子;

Live Demo

<html>
   <head>
   </head>
   
   <body>
      <p style = "margin-right: 15px; border:1px solid black;">
         This is a paragraph with a specified right margin
      </p>
      <p style = "margin-right: 5%; border:1px solid black;">
         This is another paragraph with a specified right margin in percent
      </p>
   </body>
</html>

它將產生以下結果&負;