CSS - margin 屬性

上一頁
下一頁

CSS margin 屬性用於在元素周圍建立空間，位於其邊框之外。它是一個簡寫屬性，用於在一個語句中定義以下屬性的值：margin-top，margin-right，margin-bottom 和 margin-left。

語法

margin: auto | length | percentage | initial | inherit;

屬性值

值 描述
auto 瀏覽器會自動設定所有四個邊框的邊距。
長度 使用長度單位（例如 px、em、rem 等）設定邊距的寬度。
百分比 使用百分比值（例如 10%）相對於包含元素設定邊距的寬度。
initial 它將屬性設定為其預設值。
inherit 它從父元素繼承屬性。

CSS Margin 屬性示例

以下示例說明了具有不同值的margin 屬性。

使用 Auto 值的 Margin 屬性

要允許瀏覽器自動計算邊框的邊距，我們使用auto 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      p {
         background-color: lightblue;
         padding: 10px;
         margin: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin property
   </h2>
   <h4>
      margin: auto
   </h4>
   <p>
      TutorialsPoint is an online educational platform 
      offering a wide range of resources and tutorials 
      for learners at various levels. It provides 
      comprehensive, self-paced learning materials 
      across numerous subjects, including programming, 
      web development, data science, and many other 
      technical and non-technical fields.
   </p>

</body>

</html>

使用長度值的 Margin 屬性

要設定邊框的邊距，我們可以使用長度單位（例如 px、em、rem 等）指定邊距的寬度。它最多接受四個值。根據提供的數值數量，相應的邊框將受到影響。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: #f2f2f2;
         padding: 10px;
      }

      p {
         background-color: lightblue;
         padding: 10px;
      }

      .one {
         margin: 10px;
      }

      .two {
         margin: 10px 25px;
      }

      .three {
         margin: 10px 15px 30px;
      }

      .four {
         margin: 10px 15px 30px 45px;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin property
   </h2>
   <div class="container">
      <h4>
         margin: 10px (applied to all four borders)
      </h4>
      <p class="one">
         TutorialsPoint is an online educational platform 
         offering a wide range of resources and tutorials 
         for learners at various levels. It provides 
         comprehensive, self-paced learning materials 
         across numerous subjects, including programming, 
         web development, data science, and many other 
         technical and non-technical fields.
      </p>
      <h4>
         margin: 10px 25px (10px applied to top and 
         bottom borders, 25px applied to left and 
         right borders)
      </h4>
      <p class="two">
         TutorialsPoint is an online educational platform 
         offering a wide range of resources and tutorials 
         for learners at various levels. It provides 
         comprehensive, self-paced learning materials 
         across numerous subjects, including programming, 
         web development, data science, and many other 
         technical and non-technical fields.
      </p>
      <h4>
         margin: 10px 15px 30px (10px applied to 
         top border, 15px applied to left and right 
         borders, 30px applied to bottom border)
      </h4>
      <p class="three">
         TutorialsPoint is an online educational platform 
         offering a wide range of resources and tutorials 
         for learners at various levels. It provides 
         comprehensive, self-paced learning materials 
         across numerous subjects, including programming, 
         web development, data science, and many other 
         technical and non-technical fields.
      </p>
      <h4>
         margin: 10px 15px 30px 45px (10px applied to 
         top border, 15px applied to right border, 45px 
         applied to bottom border and 45px applied to 
         left border)
      </h4>
      <p class="four">
         TutorialsPoint is an online educational platform 
         offering a wide range of resources and tutorials 
         for learners at various levels. It provides 
         comprehensive, self-paced learning materials 
         across numerous subjects, including programming, 
         web development, data science, and many other 
         technical and non-technical fields.
      </p>
   </div>
</body>

</html>

使用百分比值的 Margin 屬性

要設定邊框的邊距，我們可以使用百分比值（例如，相對於包含元素大小的 10%）指定邊距的寬度。它最多接受四個值。根據提供的數值數量，相應的邊框將受到影響。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         background-color: #f2f2f2;
         padding: 10px;
      }

      p {
         background-color: lightgreen;
         padding: 10px;
      }

      .one {
         margin: 6%;
      }

      .two {
         margin: 6% 4%;
      }

      .three {
         margin: 6% 8% 5%;
      }

      .four {
         margin: 6% 5% 7% 8%;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin property
   </h2>
   <div class="container">
      <h4>
         margin: 6% (applied to all four borders)
      </h4>
      <p class="one">
         TutorialsPoint is an online educational platform 
         offering a wide range of resources and tutorials 
         for learners at various levels. It provides 
         comprehensive, self-paced learning materials 
         across numerous subjects, including programming, 
         web development, data science, and many other 
         technical and non-technical fields.
      </p>
      <h4>
         margin: 6% 4% (6% applied to top and bottom 
         borders, 4% applied to left and right borders)
      </h4>
      <p class="two">
         TutorialsPoint is an online educational platform 
         offering a wide range of resources and tutorials 
         for learners at various levels. It provides 
         comprehensive, self-paced learning materials 
         across numerous subjects, including programming, 
         web development, data science, and many other 
         technical and non-technical fields.
      </p>
      <h4>
         margin: 6% 8% 5% (6% applied to top border, 
         8% applied to left and right borders, 5% 
         applied to bottom border)
      </h4>
      <p class="three">
         TutorialsPoint is an online educational platform 
         offering a wide range of resources and tutorials 
         for learners at various levels. It provides 
         comprehensive, self-paced learning materials 
         across numerous subjects, including programming, 
         web development, data science, and many other 
         technical and non-technical fields.
      </p>
      <h4>
         margin: 6% 5% 7% 8% (6% applied to top border, 
         5% applied to right border, 7% applied to 
         bottom border and 8% applied to left border)
      </h4>
      <p class="four">
         TutorialsPoint is an online educational platform 
         offering a wide range of resources and tutorials 
         for learners at various levels. It provides 
         comprehensive, self-paced learning materials 
         across numerous subjects, including programming, 
         web development, data science, and many other 
         technical and non-technical fields.
      </p>
   </div>
</body>

</html>

注意：margin 屬性最多接受四個值，因此根據指定的值的數量，相應的邊框將受到影響。

  • 一個值：如果給出一個值，則相同的邊距寬度將應用於所有四個邊框。
  • 兩個值：如果給出兩個值，則第一個值設定頂部和底部邊距寬度，第二個值設定左側和右側邊距寬度。
  • 三個值：如果給出三個值，則第一個值設定頂部邊距寬度，第二個值設定右側和左側邊距寬度，第三個值設定底部邊距寬度。
  • 四個值：如果給出四個值，則第一個值設定頂部邊距寬度，第二個值設定右側邊距寬度，第三個值設定底部邊距寬度，第四個值設定左側邊距寬度。

支援的瀏覽器

屬性 Chrome Edge Firefox Safari Opera
margin 1.0 6.0 1.0 1.0 3.5
css_properties_reference.htm
列印頁面
上一頁
下一頁
廣告