CSS - inset-inline-start 屬性

CSS inset-inline-start 屬性設定元素在內聯方向上與其父容器起始邊之間的距離。它取決於元素的書寫模式、方向和文字方向。為了使該屬性生效，必須定義position 屬性。

語法

inset-inline-start: auto | length | percentage | initial | inherit;

屬性值

值	描述
auto	根據元素內容或其他佈局因素確定元素的大小。預設值。
length	使用長度單位（例如 px、em、rem 等）設定元素起始邊的距離。可以使用負值。
percentage	使用相對於其父容器的百分比值設定元素起始邊的距離。
initial	將屬性設定為其預設值。
inherit	從父元素繼承該屬性。

CSS Inset Inline start 屬性示例

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

使用 Auto 值的 Inset Inline Start 屬性

為了讓瀏覽器根據其他 CSS 屬性和應用於元素的佈局規則確定內聯起始邊的適當偏移量，我們使用 auto 值。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 2px solid;
         height: 200px;
         width: 300px;
         position: relative;
      }

      .inner-box {
         height: 100%;
         position: absolute;
         background-color: lightgreen;
         inset-inline-start: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset-inline-start property
   </h2>
   <h4>
      inset-inline-start: auto
   </h4>
   <div class="container">
      <div class="inner-box">
         This shows the inset-inline-start property. Observe 
         how the distance of this green area is changed
         from the inline-start.
      </div>
   </div>
</body>

</html>

使用長度值的 Inset Inline Start 屬性

要設定包含塊的內聯起始邊與元素起始邊的距離，我們可以使用長度單位（例如 px、em、rem 等）指定距離。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 2px solid;
         height: 200px;
         width: 300px;
         position: relative;
      }

      .inner {
         height: 100%;
         position: absolute;
         background-color: lightgreen;
         inset-inline-start: 0;
      }

      .inner-box1 {
         inset-inline-start: 30px;
      }

      .inner-box2 {
         inset-inline-start: 6em;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset-inline-start property
   </h2>
   <h4>
      inset-inline-start: 30px (The distance of the 
      start of the green area is 30px from the parent 
      container)
   </h4>
   <div class="container">
      <div class="inner inner-box1">
         This shows the inset-inline-start property. Observe 
         how the distance of this green area is changed 
         from inline-start.
      </div>
   </div>
   <h4>
      inset-inline-start: 6em (The distance of the start 
      of the green area is 6em from the parent 
      container)
   </h4>
   <div class="container">
      <div class="inner inner-box2">
         This shows the inset-inline-start property. Observe 
         how the distance of this green area is changed 
         from inline-start.
      </div>
   </div>
</body>

</html>

使用百分比值的 Inset Inline Start 屬性

要設定包含塊的內聯起始邊與元素起始邊的距離，我們可以使用百分比值（例如 10%）指定距離。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 2px solid;
         height: 200px;
         width: 300px;
         position: relative;
      }

      .inner {
         height: 100%;
         position: absolute;
         background-color: lightgreen;
         inset-inline-start: 0;
      }

      .inner-box1 {
         inset-inline-start: 20%;
      }

      .inner-box2 {
         inset-inline-start: 60%;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset-inline-start property
   </h2>
   <h4>
      inset-inline-start: 20% (The distance of the 
      start of the green area is 20% of the 
      container.)
   </h4>
   <div class="container">
      <div class="inner inner-box1">
         This shows the inset-inline-start property. Observe 
         how the distance of this green area is changed 
         from inline-start.
      </div>
   </div>
   <h4>
      inset-inline-start: 60% (The distance of the start 
      of the green area is 60% of the container.)
   </h4>
   <div class="container">
      <div class="inner inner-box2">
         This shows the inset-inline-start property. Observe 
         how the distance of this green area is changed 
         from inline-start.
      </div>
   </div>
</body>

</html>

使用書寫模式的 Inset Inline Start 屬性

inset-inline-start 屬性可以與 writing-mode 屬性結合使用，後者確定文字的方向。在水平模式下，它影響左側距離。在垂直模式下，它影響頂部距離。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         border: 2px solid;
         height: 200px;
         width: 300px;
         position: relative;
      }

      .inner {
         position: absolute;
         background-color: lightgreen;
         inset-inline-start: 0;
         inset-inline-start: 50%;
      }

      .inner-box1 {
         height: 100%;
         writing-mode: horizontal-lr;

      }

      .inner-box2 {
         width: 100%;
         writing-mode: vertical-lr;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset-inline-start property
   </h2>
   <h4>
      inset-inline-start: 50% ; 
      writing mode: horizontal-lr
   </h4>
   <div class="container">
      <div class="inner inner-box1">
         This shows the inset-inline-start property. Observe 
         how the distance of this green area is changed 
         from inline-start.
      </div>
   </div>
   <h4>
      inset-inline-start: 50% ; 
      writing-mode: vertical-lr
   </h4>
   <div class="container">
      <div class="inner inner-box2">
         This shows the inset-inline-start property. Observe 
         how the distance of this green area is changed 
         from inline-start.
      </div>
   </div>
</body>

</html>

支援的瀏覽器

屬性
inset-inline-start	87.0	87.0	63.0	14.1	73.0

css_properties_reference.htm

列印頁面