CSS - inset-inline 屬性

CSS inset-inline 屬性確定元素在內聯方向上的邏輯起始和結束偏移量。它取決於元素的書寫模式、方向和文字方向。它是inset-inline-end 和 inset-inline-start CSS 屬性的簡寫屬性。position 屬性必須定義才能使該屬性顯示其效果。

語法

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

屬性值

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

CSS Inset Inline 屬性示例

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

使用 Auto 值的 Inset Inline 屬性

為了允許瀏覽器根據其他 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: auto;
      }
   </style>
</head>

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

</html>

使用長度值的 Inset Inline 屬性

要設定距包含塊內聯邊緣的距離，我們可以使用長度單位（例如 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;
      }

      .inner-box1 {
         inset-inline: 10px;
      }

      .inner-box2 {
         inset-inline: 25px 50px;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset-inline property
   </h2>
   <h4>
      inset-inline: 10px (Both inline-start 
      and inline-end distances are 10px)
   </h4>
   <div class="container">
      <div class="inner inner-box1">
         This shows the inset-inline property. Observe 
         how the distance of this green area is changed 
         from the inline-start and inline-end.
      </div>
   </div>
   <h4>
      inset-inline: 25px 50px (inline-start 
      distance is 25px and inline-end distance
      is 50px)
   </h4>
   <div class="container">
      <div class="inner inner-box2">
         This shows the inset-inline property. Observe 
         how the distance of this green area is changed
         from the inline-start and inline-end.
      </div>
   </div>
</body>

</html>

使用百分比值的 Inset Inline 屬性

要設定距包含塊內聯邊緣的距離，我們可以使用百分比值（例如 10%）指定距離。最多可以給出兩個值。單個值設定內聯開始和內聯結束距離。如果給出兩個值，則第一個值設定內聯開始距離，而第二個值設定內聯結束距離。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

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

      .inner {
         height: 100%;
         position: absolute;
         background-color: lightgreen;
      }

      .inner-box1 {
         inset-inline: 10%;
      }

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

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

</html>

使用混合值的 Inset Inline 屬性

要設定距包含塊內聯邊緣的距離，我們可以使用長度和百分比值的組合（例如 10px 20%）指定距離。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

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

      .inner {
         height: 100%;
         position: absolute;
         background-color: lightgreen;
      }

      .inner-box1 {
         inset-inline: 10% 55px;
      }

      .inner-box2 {
         inset-inline: 75px 15%;
      }
   </style>
</head>

<body>
   <h2>
      CSS inset-inline property
   </h2>
   <h4>
      inset-inline: 10% 55px (inline-start distance 
      is 10% of container and inline-end distance 
      is 55px )
   </h4>
   <div class="container">
      <div class="inner inner-box1">
         This shows the inset-inline property. Observe 
         how the distance of this green area is changed 
         from the inline-start and inline-end.
      </div>
   </div>
   <h4>
      inset-inline: 75px 15% (inline-start distance 
      is 75px and inline-end distance is 15% of 
      the container)
   </h4>
   <div class="container">
      <div class="inner inner-box2">
         This shows the inset-inline property. Observe 
         how the distance of this green area is changed 
         from the inline-start and inline-end.
      </div>
   </div>
</body>

</html>

使用書寫模式的 Inset Inline 屬性

inset-inline 屬性可以與 writing-mode 屬性結合使用，該屬性確定文字的方向。在水平模式下，它影響左右距離。在垂直模式下，它影響上下距離。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

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

        .inner {

            position: absolute;
            background-color: lightgreen;
            inset-inline: 30px 40px;
        }

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

        }

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

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

</html>

支援的瀏覽器

屬性
inset-inline	87.0	87.0	63.0	14.1	73.0

css_properties_reference.htm

列印頁面