CSS - margin-block 屬性

CSS **margin-block** 屬性設定元素的垂直邊距，即應用於元素**block-start** 和 **block-end** 側的邊距。它是一個簡寫屬性，用於在一個語句中定義屬性的值：margin-block-start 和 margin-block-end。邊距的方向受writing-mode 屬性影響。

語法

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

屬性值

值	描述
auto	瀏覽器會自動設定 block-start 和 block-end 邊緣的邊距。
長度	使用長度單位（例如 px、em、rem 等）設定 margin-block 的寬度。允許使用負值。
百分比	使用百分比值（例如 10%）相對於包含元素設定 margin-block 的寬度。
initial	將其屬性設定為預設值。
inherit	它從父元素繼承屬性。

CSS Margin Block 屬性示例

以下示例解釋了具有不同值的**margin-block** 屬性。

使用 auto 值的 Margin Block 屬性

為了讓瀏覽器根據可用空間自動計算邊距，我們使用**auto** 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         height: 200px;
         padding: 20px;
      }

      .demo {
         background-color: lightgreen;
         width: 50%;
         padding: 15px;
         text-align: center;
      }

      .auto {
         margin-block: auto;
         background-color: lightblue;
         border-top: 4px solid red;
         border-bottom: 4px solid red;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-block property
   </h2>
   <h4>
      margin-block: auto
   </h4>
   <div class="container">
      <div class="demo">
         top box
      </div>
      <div class="auto demo">
         This box has both block-start and 
         block-end edges margin = auto.
      </div>
      <div class="demo">
         bottom box
      </div>
   </div>
</body>

</html>

使用長度值的 Margin Block 屬性

要設定元素的**block-start** 和 **block-end** 邊緣的邊距，我們可以使用長度單位（例如 px、em、rem 等）指定邊距大小。它最多接受兩個值。根據指定的值的數量，邊距大小將應用於邊緣。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         height: 240px;
         padding: 20px;
      }

      .demo {
         background-color: lightgreen;
         width: 50%;
         padding: 15px;
         border: 3px dashed red;
         text-align: center;
      }

      .item {
         background-color: lightblue;
         border-top: 4px solid red;
         border-bottom: 4px solid red;
      }

      .single-value {
         margin-block: 16px;

      }

      .double-value {
         margin-block: 30px 60px;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-block property
   </h2>
   <h4>
      margin-block: 16px
   </h4>
   <div class="container">
      <div class="demo">
         top box
      </div>
      <div class="single-value demo item">
         This box has both block-start and 
         block-end edges margin = 16px
      </div>
      <div class="demo">
         bottom box
      </div>
   </div>
   <h4>
      margin-block: 30px 60px
   </h4>
   <div class="container">
      <div class="demo">
         top box
      </div>
      <div class="double-value demo item">
         This box has block-start margin = 30px 
         and and block-end margin = 60px
      </div>
      <div class="demo">
         bottom box
      </div>
   </div>
</body>

</html>

使用百分比值的 Margin Block 屬性

要設定元素的**block-start** 和 **block-end** 邊緣的邊距，我們可以使用百分比值（例如，包含元素寬度的 10%）指定邊距大小。它最多接受兩個值。根據指定的值的數量，邊距大小將應用於邊緣。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         height: 240px;
         padding: 20px;
      }

      .demo {
         background-color: lightgreen;
         width: 50%;
         padding: 15px;
         border: 3px dashed red;
         text-align: center;
      }

      .item {
         background-color: lightblue;
         border-top: 4px solid red;
         border-bottom: 4px solid red;
      }

      .single-value {
         margin-block: 6%;

      }

      .double-value {
         margin-block: 4% 10%;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-block property
   </h2>
   <h4>
      margin-block: 6%
   </h4>
   <div class="container">
      <div class="demo">
         top box
      </div>
      <div class="single-value demo item">
         This box has both block-start and block-end 
         edges margin = 6% of the container height.
      </div>
      <div class="demo">
         bottom box
      </div>
   </div>
   <h4>
      margin-block: 4% and 10%
   </h4>
   <div class="container">
      <div class="demo">
         top box
      </div>
      <div class="double-value demo item">
         This box has block-start margin = 4% 
         and and block-end margin = 10% of the 
         container height.
      </div>
      <div class="demo">
         bottom box
      </div>
   </div>
</body>

</html>

帶有書寫模式的 Margin Block 屬性

**margin-block** 屬性可以與**writing-mode** 屬性結合使用，該屬性確定塊的方向。在水平模式（如 horizontal-lr）中，**block-start** 為頂部，**block-end** 為底部。在垂直模式（如 vertical-rl）中，**block-start** 為右側，**block-end** 為左側。這些在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         height: 300px;
         padding: 20px;
      }

      .demo {
         background-color: lightgreen;
         width: 50%;
         padding: 15px;
         border: 3px dashed red;
         text-align: center;
      }

      .item {
         background-color: lightblue;
         margin-block: 60px;
      }

      .horizontal-value {
         border-top: 4px solid red;
         border-bottom: 4px solid red;
         writing-mode: horizontal-lr;

      }

      .vertical-value {
         border-left: 4px solid red;
         border-right: 4px solid red;
         writing-mode: vertical-rl;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-block property
   </h2>
   <h4>
      margin-block: 60px; 
      writing-mode: horizontal-lr;
   </h4>
   <div class="container">
      <div class="demo">
         top box
      </div>
      <div class="horizontal-value demo item">
         This box has both block-start and 
         block-end edges margin = 60px with 
         writing-mode: horizontal-lr.
      </div>
      <div class="demo">
         bottom box
      </div>
   </div>
   <h4>
      margin-block: 60px; 
      writing-mode: vertical-rl;
   </h4>
   <div class="container">
      <div class="demo">
         top box
      </div>
      <div class="vertical-value demo item">
         This box has both block-start margin = 60px 
         with writing-mode: vertical-rl. 
      </div>
      <div class="demo">
         bottom box
      </div>
   </div>
</body>

</html>

支援的瀏覽器

屬性
margin-block	87.0	87.0	66.0	14.1	73.0

css_properties_reference.htm

列印頁面