A propriedade doCSSinline-size define o tamanho horizontal e vertical de um elemento bloco. Ele é correspondente a cada propriedadewidth ou aheight, dependendo do valor dewriting-mode.

/* <length> values */inline-size: 300px;inline-size: 25em;/* <percentage> values */inline-size: 75%;/* Keyword values */inline-size: 25em border-box;inline-size: 75% content-box;inline-size: max-content;inline-size: min-content;inline-size: available;inline-size: fit-content;inline-size: auto;/* Global values */inline-size: inherit;inline-size: initial;inline-size: unset;

Se o writing mode é orientado verticalmente, o valor deinline-size relaciona a altura do elemento; ao contrário, está relacionado a largura do elemento. A propriedade relacionada é ablock-size, no qual define a outra dimensão do elemento.

Sintaxe

Valores

A propriedadeinline-size aproveita os mesmos valores que as propriedadeswidth eheight.

Sintaxe formal

inline-size =
<'width'>

<width> =
auto|
<length-percentage [0,∞]>|
min-content|
max-content|
fit-content(<length-percentage [0,∞]>)|
<calc-size()>|
<anchor-size()>|
stretch|
fit-content|
contain

<length-percentage> =
<length>|
<percentage>

<calc-size()> =
calc-size(<calc-size-basis> ,<calc-sum>)

<anchor-size()> =
anchor-size([<anchor-name>||<anchor-size>]? ,<length-percentage>?)

<calc-size-basis> =
<size-keyword>|
<calc-size()>|
any|
<calc-sum>

<calc-sum> =
<calc-product>[[ '+'| '-']<calc-product>]*

<anchor-name> =
<dashed-ident>

<anchor-size> =
width|
height|
block|
inline|
self-block|
self-inline

<calc-product> =
<calc-value>[[ '*'| /]<calc-value>]*

<calc-value> =
<number>|
<dimension>|
<percentage>|
<calc-keyword>|
  (<calc-sum>)

<calc-keyword> =
e|
pi|
infinity|
-infinity|
NaN

Exemplo

HTML

<p>Texto de Exemplo</p>

CSS

.exampleText {  writing-mode: vertical-rl;  background-color: yellow;  inline-size: 110px;}

Especificações

Compatibilidade com navegadores

Veja também

• As propriedades físicas mapeadas:width eheight
• writing-mode