CSS - margin-block-start 屬性

CSS margin-block-start 屬性用於設定元素在塊方向起始處的邊距空間。writing-mode 屬性決定塊方向。

語法

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

屬性值

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

CSS Margin Block Start 屬性示例

以下示例說明了margin-block-start 屬性的不同值。

使用 auto 值的 Margin Block Start 屬性

為了讓瀏覽器根據可用空間自動計算塊起始邊緣的邊距，我們使用auto 值。以下示例顯示了這一點。

示例

<!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;
      }

      .auto {
         margin-block-start: auto;

      }
   </style>
</head>

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

</html>

使用長度值的 Margin Block Start 屬性

要設定元素的block-start 邊緣的邊距，我們可以使用長度單位（例如 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;
      }

      .single-value-px {
         margin-block-start: 30px;

      }

      .single-value-em {
         margin-block-start: 4em;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-block-start property
   </h2>
   <h4>
      margin-block-start: 30px
   </h4>
   <div class="container">
      <div class="demo">
         top box
      </div>
      <div class="single-value-px demo item">
         This box has block-start edge margin = 30px
      </div>
      <div class="demo">
         bottom box
      </div>
   </div>
   <h4>
      margin-block-start: 4em
   </h4>
   <div class="container">
      <div class="demo">
         top box
      </div>
      <div class="single-value-em demo item">
         This box has block-start edge margin = 4em
      </div>
      <div class="demo">
         bottom box
      </div>
   </div>
</body>

</html>

使用百分比值的 Margin Block Start 屬性

要設定元素的block-start 邊緣的邊距，我們可以使用百分比值（例如 10%（包含元素寬度的 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;
      }

      .example1 {
         margin-block-start: 7%;

      }

      .example2 {
         margin-block-start: 15%;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-block-start property
   </h2>
   <h4>
      margin-block-start: 7%
   </h4>
   <div class="container">
      <div class="demo">
         top box
      </div>
      <div class="example1 demo item">
         This box has block-start edge margin = 7% 
         of the width of containing element.
      </div>
      <div class="demo">
         bottom box
      </div>
   </div>
   <h4>
      margin-block-start: 15%
   </h4>
   <div class="container">
      <div class="demo">
         top box
      </div>
      <div class="example2 demo item">
         This box has block-start edge margin = 15% 
         of the width of containing element.
      </div>
      <div class="demo">
         bottom box
      </div>
   </div>
</body>

</html>

帶有書寫模式的 Margin Block Start 屬性

margin-block-start 屬性可以與writing-mode 屬性結合使用，後者決定塊起始方向。在水平模式（如 horizontal-lr）中，block-start 為頂部。在垂直模式（如 vertical-rl）中，block-start 為右側。以下示例顯示了這些情況。

示例

<!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-horizontal {
         border-top: 4px solid red;
      }

      .item-vertical {
         border-right: 4px solid red;
      }

      .margin {
         background-color: lightblue;
         margin-block-start: 50px;
      }

      .horizontal {
         writing-mode: horizontal-lr;
      }

      .vertical {
         writing-mode: vertical-rl;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-block-start property
   </h2>
   <h4>
      margin-block-start: 50px; writing-mode: horizontal-lr;
   </h4>
   <div class="container">
      <div class="demo">
         top box
      </div>
      <div class="horizontal demo item-horizontal margin">
         This box has block-start edge margin = 50px 
         and writing-mode: horizontal-lr;
      </div>
      <div class="demo">
         bottom box
      </div>
   </div>
   <h4>
      margin-block-start: 50px; writing-mode: vertical-rl;
   </h4>
   <div class="container vertical">
      <div class="demo">
         top box
      </div>
      <div class="vertical demo item item-vertical margin">
         This box has block-start edge margin = 50px 
         and writing-mode: vertical-rl;
      </div>
      <div class="demo">
         bottom box
      </div>
   </div>
</body>

</html>

支援的瀏覽器

屬性
margin-block-start	87.0	87.0	41.0	12.1	73.0

css_properties_reference.htm

列印頁面