CSS 属性

CSS 的 inline-size 属性根据元素的书写模式确定元素内联的水平或垂直尺寸。它与CSS的宽度或高度属性相关，基于writing-mode的值。

当书写模式为垂直方向时，inline-size的值与元素的高度相关，否则与元素的宽度有关。

属性值

CSS 属性 inline-size 的值与 height和高width属性相同。

适用范围

除不可替换的内联元素、表格行和行组。

语法

以下是声明 inline-size 的不同方式:

长度值

inline-size: 100px;
inline-size: 20em; 
  • 1

百分比值

inline-size: 45%;

    关键字值

    inline-size: max-content;
inline-size: min-content;
inline-size: fit-content;
inline-size: auto; 
    • 1
    • 2
    • 3

    全局值

    inline-size: inherit;
inline-size: initial;
inline-size: revert;
inline-size: revert-layer;
inline-size: unset; 
    • 1
    • 2
    • 3
    • 4

    CSS inline-size: 使用长度值

    以下示例演示了使用写入模式:vertical-rl 和 inline-size 给出长度值的输出:

    <html>
<head>
<style>
   .container {
      writing-mode: vertical-rl;
      background-color: pink;
      border: 2px solid blue;
      display: inline-block;
   }

   .sampleText-px {
      inline-size: 100px;
   }

   .sampleText-em {
      inline-size: 20em;
   }
</style>
</head>
<body>
   <h2>inline-size: length value with writing-mode: vertical-rl</h2>
   <div class="container sampleText-px">Sample Text-px</div>
   <div class="container sampleText-em">Sample Text-em</div>
</body>
</html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    以下示例演示了使用写入模式:horizontal-tb 和 inline-size 的输出inline-size 被赋予一个长度值:

    <html>
<head>
<style>
   .container {
      writing-mode: horizontal-tb;
      background-color: pink;
      border: 2px solid blue;
      display: inline-block;
   }

   .sampleText-px {
      inline-size: 100px;
   }

   .sampleText-em {
      inline-size: 20em;
   }
</style>
</head>
<body>
   <h2>inline-size: length value with writing-mode: horizontal-tb</h2>
   <div class="container sampleText-px">Sample Text-px</div>
   <div class="container sampleText-em">Sample Text-em</div>
</body>
</html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    CSS inline-size: 使用百分比值

    以下示例演示了使用写入模式的输出:vertical-rl 和 inline-size 为以百分比值给出:

    <html>
<head>
<style>
   .container {
      writing-mode: vertical-rl;
      background-color: pink;
      border: 2px solid blue;
      display: inline-block;
   }

   .sampleText-10per {
      inline-size: 10%;
   }

   .sampleText-65per {
      inline-size: 65%;
   }
</style>
</head>
<body>
   <h2>inline-size: percentage value with writing-mode: vertical-rl</h2>
   <div class="container sampleText-10per">Sample Text-10%</div>
   <div class="container sampleText-65per">Sample Text-65%</div>
</body>
</html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    以下示例演示了使用writing-mode:horizontal-tb 和 inline-size 的输出，以百分比值给出:

    <html>
<head>
<style>
   .container {
      writing-mode: horizontal-tb;
      background-color: pink;
      border: 2px solid blue;
      display: inline-inline;
   }

   .sampleText-10per {
      inline-size: 10%;
   }

   .sampleText-65per {
      inline-size: 65%;
   }
</style>
</head>
<body>
   <h2>inline-size: percentage value with writing-mode: horizontal-tb</h2>
   <div class="container sampleText-10per">Sample Text-10%</div>
   <div class="container sampleText-65per">Sample Text-65%</div>
</body>
</html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    CSS inline-size: 使用关键字值

    以下示例演示了使用写入模式的输出:vertical-rl 和 inline-size 作为关键字值给出:

    <html>
<head>
<style>
   .container {
      writing-mode: vertical-rl;
      background-color: pink;
      border: 2px solid blue;
      display: inline-block;
   }

   .sampleText-auto {
      inline-size: auto;
   }

   .sampleText-max {
      inline-size: max-content;
   }

   .sampleText-min {
      inline-size: min-content;
   }

   .sampleText-fit {
      inline-size: fit-content;
   }
</style>
</head>
<body>
   <h2>inline-size: keyword value with writing-mode: vertical-rl</h2>
   <div class="container sampleText-auto">Sample Text: auto</div>
   <div class="container sampleText-max">Sample Text: max-content</div>
   <div class="container sampleText-min">Sample Text: min-content</div>
   <div class="container sampleText-fit">Sample Text: fit-content feature</div>
</body>
</html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    以下示例演示了使用写入模式的输出-mode:horizontal-tb 和 inline-size 作为关键字值给出:

    <html>
<head>
<style>
   .container {
      writing-mode: horizontal-tb;
      background-color: pink;
      border: 2px solid blue;
      display: inline-block;
   }

   .sampleText-auto {
      inline-size: auto;
   }

   .sampleText-max {
      inline-size: max-content;
   }

   .sampleText-min {
      inline-size: min-content;
   }

   .sampleText-fit {
      inline-size: fit-content;
   }
</style>
</head>
<body>
   <h2>inline-size: keyword value with writing-mode: horizontal-tb</h2>
   <div class="container sampleText-auto">Sample Text: auto</div>
   <div class="container sampleText-max">Sample Text: max-content</div>
   <div class="container sampleText-min">Sample Text: min-content</div>
   <div class="container sampleText-fit">Sample Text: fit-content feature</div>
</body>
</html> 
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34