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

打印页面