CSS - margin-inline 屬性

CSS 的 margin-inline 屬性設定元素的 inline-start 和 inline-end 邊緣的外邊距。它是一個簡寫屬性，用於在一個宣告中定義以下屬性的值：margin-inline-start 和 margin-inline-end。 writing-mode 和 direction 屬性定義內聯方向。

語法

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

屬性值

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

CSS Margin Inline 屬性示例

以下示例說明了使用不同值的 margin-inline 屬性。

使用 Auto 值的 Margin Inline 屬性

要允許瀏覽器根據可用空間自動計算元素的 inline-start 和 inline-end 邊緣的外邊距，我們使用 auto 值。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

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

      .container>div {
         width: 150px;
         height: 200px;
         float: left;
         box-sizing: border-box;
      }

      .props {
         text-align: center;
         padding: 10px;
      }

      .auto-box {
         background-color: lightblue;
         border: 3px solid blue;
         margin-inline: auto;
      }

      .demo-box {
         background-color: #04bf52;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-inline property
   </h2>
   <h4>
      margin-inline: auto
   </h4>
   <div class="container">
      <div class="demo-box props">
         sample box
      </div>
      <div class="auto-box props">
         This box has margin-inline: auto
      </div>
      <div class="demo-box props"> 
         sample box
      </div>
   </div>
</body>

</html>

使用 Length 值的 Margin Inline 屬性

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

示例

<!DOCTYPE html>
<html>

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

      .container>div {
         width: 150px;
         height: 200px;
         float: left;
         box-sizing: border-box;
      }

      .props {
         text-align: center;
         padding: 10px;
      }

      .center {
         background-color: lightblue;
         border: 3px solid blue;
      }

      .px-box {
         margin-inline: 10px;
      }

      .em-box {
         margin-inline: 10px 30px;
      }

      .demo-box {
         background-color: #04bf52;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-inline property
   </h2>
   <h4>
      margin-inline: 10px
   </h4>
   <div class="container">
      <div class="demo-box props">
         sample box
      </div>
      <div class="px-box props center">
         This box has margin-inline: 10px 
         (for both inline-start and inline-end edges)
      </div>
      <div class="demo-box props"> 
         sample box
      </div>
   </div>
   <h4>
      margin-inline: 10px 30px
   </h4>
   <div class="container">
      <div class="demo-box props">
         sample box
      </div>
      <div class="em-box props center">
         This box has margin-inline: 10px 30px 
         (for inline-start edge- 10px, for 
         inline-end edge-30px)
      </div>
      <div class="demo-box props"> 
         sample box
      </div>
   </div>
</body>

</html>

使用 Percentage 值的 Margin Inline 屬性

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

示例

<!DOCTYPE html>
<html>

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

      .container>div {
         width: 150px;
         height: 200px;
         float: left;
         box-sizing: border-box;
      }

      .props {
         text-align: center;
         padding: 10px;
      }

      .center {
         background-color: lightblue;
         border: 3px solid blue;
      }

      .example1 {
         margin-inline: 3%;
      }

      .example2 {
         margin-inline: 2% 3%;
      }

      .demo-box {
         background-color: #04bf52;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-inline property
   </h2>
   <h4>
      margin-inline: 3%
   </h4>
   <div class="container">
      <div class="demo-box props">
         sample box
      </div>
      <div class="example1 props center">
         This box has margin-inline: 3% for 
         both the inline-start and inline-end 
         edges of the width of the container.
      </div>
      <div class="demo-box props"> 
      sample box
      </div>
   </div>
   <h4>
      margin-inline: 2% 3%
   </h4>
   <div class="container">
      <div class="demo-box props">
         sample box
      </div>
      <div class="example2 props center">
         This box has margin-inline: 2% for 
         inline-start edge and 3% for inline-end 
         edge of the width of the container.
      </div>
      <div class="demo-box props"> 
         sample box
      </div>
   </div>
</body>

</html>

帶有方向的 Margin Inline 屬性

margin-inline 屬性可以與 direction 屬性結合使用，該屬性確定文字和內聯元素的水平方向。如果 direction 為 ltr，則 inline-start 在左側，inline-end 在右側。如果 direction 為 rtl，則 inline-start 在右側，inline-end 在左側。這些在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

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

      .container>div {
         width: 150px;
         height: 200px;
         float: left;
         box-sizing: border-box;
      }

      .props {
         text-align: center;
         padding: 10px;
      }

      .center {
         background-color: lightblue;
         border: 3px solid blue;
         margin-inline: 5px 12px;
      }

      .demo-box {
         background-color: #04bf52;
      }

      .direction-rtl {
         direction: rtl;
      }

      .direction-ltr {
         direction: ltr;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-inline property
   </h2>
   <h4>
      margin-inline: 5px 10px; direction: rtl
   </h4>
   <div class="container">
      <div class="demo-box props">
         sample box
      </div>
      <div class="direction-rtl props center">
         This box has margin-inline: 5px for 
         inline-start edge and 12px for inline-end 
         edge with rtl direction.
      </div>
      <div class="demo-box props"> 
         sample box
      </div>
   </div>
   <h4>
      margin-inline: 5px 10px; direction: ltr
   </h4>
   <div class="container">
      <div class="demo-box props">
         sample box
      </div>
      <div class="direction-ltr props center">
         This box has margin-inline: 5px for 
         inline-start edge and 12px for inline-end 
         edge with ltr direction.
      </div>
      <div class="demo-box props"> sample box</div>
   </div>
</body>

</html>

帶有書寫模式的 Margin Inline 屬性

margin-inline 屬性可以與 writing-mode 屬性結合使用，該屬性確定文件中文字流的方向和方向。例如，在垂直模式（如 vertical-rl）中，inline-start 為頂部，inline-end 為底部。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         height: 50%;
         width: 50%;
      }

      .container > div {
         writing-mode: vertical-rl;
         block-size: 100%;
         box-sizing: border-box;
      }

      .demo-box {
         background-color: #04bf52;
         inline-size: 20%;
      }

      .main-box {
         background-color: lightblue;
         inline-size: 50%;
         border: solid black 1px;
         margin-inline: 10px 30px;
      }
   </style>
</head>

<body>
   <h2>
      CSS margin-inline property
   </h2>
   <h4>
      margin-inline: 10px 30px; 
      writing-mode: vertical-rl
   </h4>
   <div class="container">
      <div class="demo-box">
         sample box
      </div>
      <div class="main-box">
         <p>
            This box has margin-inline: 10px for 
            inline-start and 30px for inline-end edges 
            with writing-mode: vertical-rl;
         </p>
      </div>
      <div class="demo-box">
         sample box
      </div>
   </div>

</body>

</html>

支援的瀏覽器

屬性
margin-inline	87.0	87.0	66.0	14.1	73.0

css_properties_reference.htm

列印頁面