CSS - inline-size 屬性

CSS 的 inline-size 屬性根據元素的書寫模式確定元素內聯的水平或垂直大小。它與 CSS 的 width 或 height 屬性相關，具體取決於 writing-mode 的值。當書寫模式為 垂直方向時，inline-size 的值與元素的高度相關，否則與元素的寬度相關。

語法

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

屬性值

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

CSS 內聯大小屬性示例

以下示例使用不同的值解釋了 inline-size 屬性。

使用 Auto 值的內聯大小屬性

為了讓瀏覽器根據其內容、其包含塊的大小和其他佈局因素來確定元素的大小，我們使用 auto 值。它與水平模式下的 width 屬性的工作方式類似。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         background-color: lightgreen;
         height: 90px;
         inline-size: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS inline-size property
   </h2>
   <h4>
      inline-size: auto
   </h4>
   <p class="example">
      TutorialsPoint is an online educational platform
      offering a vast range of tutorials and courses
      on programming, web development, and other 
      technical topics. It provides free resources, 
      coding exercises, and comprehensive guides to 
      help learners enhance their skills and knowledge.
   </p>
</body>

</html>

使用長度值的內聯大小屬性

要為元素設定固定的內聯大小，我們可以使用長度單位（例如 10px、25em、16 rem 等）指定大小。該值是絕對的，不會根據包含塊或其他元素的大小進行調整。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         background-color: lightgreen;
         height: 90px;
      }

      .example-a {
         inline-size: 400px;
      }

      .example-b {
         inline-size: 32em;
      }
   </style>
</head>

<body>
   <h2>
      CSS inline-size property
   </h2>
   <h4>
      inline-size: 400px
   </h4>
   <p class="example example-a">
      TutorialsPoint is an online educational platform
      offering a vast range of tutorials and courses
      on programming, web development, and other 
      technical topics. It provides free resources, 
      coding exercises, and comprehensive guides to 
      help learners enhance their skills and knowledge.
   </p>
   <h4>
      inline-size: 32em 
   </h4>
   <p class="example example-b">
      TutorialsPoint is an online educational platform
      offering a vast range of tutorials and courses
      on programming, web development, and other 
      technical topics. It provides free resources, 
      coding exercises, and comprehensive guides to 
      help learners enhance their skills and knowledge.
   </p>
</body>

</html>

使用百分比值的內聯大小屬性

要為元素設定固定的內聯大小，我們可以使用百分比值（例如 105、25% 等）指定大小。這將元素的大小設定為其包含塊的內聯大小的百分比。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         background-color: lightgreen;
         height: 90px;
      }
      .example-a {
         inline-size: 70%;
      }

      .example-b {
         inline-size: 90%;
      }
   </style>
</head>

<body>
   <h2>
      CSS inline-size property
   </h2>
   <h4>
      inline-size: 55%
   </h4>
   <p class="example example-a">
      TutorialsPoint is an online educational platform
      offering a vast range of tutorials and courses
      on programming, web development, and other 
      technical topics. It provides free resources, 
      coding exercises, and comprehensive guides to 
      help learners enhance their skills and knowledge.
   </p>
   <h4>
      inline-size: 70%
   </h4>
   <p class="example example-b">
      TutorialsPoint is an online educational platform
      offering a vast range of tutorials and courses
      on programming, web development, and other 
      technical topics. It provides free resources, 
      coding exercises, and comprehensive guides to 
      help learners enhance their skills and knowledge.
   </p>
</body>

</html>

使用書寫模式的內聯大小屬性

inline-size 屬性可以與 writing-mode 屬性結合使用，該屬性定義文字的方向。當 writing-mode 設定為垂直模式（如從上到下）時，inline-size 屬性指的是高度，在水平模式（如從左到右）下，它指的是寬度。這在以下示例中顯示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .example {
         background-color: lightgreen;
         height: 90px;
         inline-size: 400px;
      }

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

      .example-b {
         writing-mode: vertical-lr;
      }
   </style>
</head>

<body>
   <h2>
      CSS inline-size property
   </h2>
   <h4>
      inline-size: 400px; 
      writing-mode: horizontal-lr
   </h4>
   <p class="example example-a">
      TutorialsPoint is an online educational platform
      offering a vast range of tutorials and courses
      on programming, web development, and other 
      technical topics. It provides free resources, 
      coding exercises, and comprehensive guides to 
      help learners enhance their skills and knowledge.
   </p>
   <h4>
      inline-size: 400px; 
      writing-mode: vertical-lr 
   </h4>
   <p class="example example-b">
      TutorialsPoint is an online educational platform
      offering a vast range of tutorials and courses
      on programming, web development, and other 
      technical topics. It provides free resources, 
      coding exercises, and comprehensive guides to 
      help learners enhance their skills and knowledge.
   </p>
</body>

</html>

支援的瀏覽器

屬性
inline-size	57.0	79.0	41.0	12.1	44.0

css_properties_reference.htm

列印頁面