Atributo CSS inline-size

Definição e uso

inline-size O atributo especifica o tamanho do elemento na direção inline.

Atenção：Atributos CSS relacionados writing-mode Define a direção inline, o que afeta inline-size Para páginas em inglês, a direção inline é de esquerda para direita, enquanto a direção block é para baixo.

O atributo de CSS inline-size e block-size Os atributos são semelhantes aos de CSS width e height Os atributos são muito semelhantes, mas inline-size e block-size O atributo depende das direções inline e block.

Exemplo

Exemplo 1

Defina o tamanho do elemento <div> na direção inline：

div {
  inline-size: 200px;
}

Experimente você mesmo

Exemplo 2

quando o elemento <div> writing-mode O valor do atributo é definido como vertical-rl quando, a direção inline muda de horizontal para vertical para baixo, isso afeta inline-size Como o atributo funciona：

div {
  inline-size: 250px;
  writing-mode: vertical-rl;
}

Experimente você mesmo

Sintaxe CSS

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

Valor do atributo

Valor Descrição
auto Valor padrão. O valor padrão inline-size do elemento.
length

Especifique o tamanho na direção inline, com unidades como px, pt, cm, etc.

Permite valores negativos. Veja:Unidades CSS。
% Especifique o percentual do tamanho em relação ao eixo correspondente do elemento pai.
initial Defina este atributo para seu valor padrão. Veja initial。
inherit Herda este atributo do elemento pai. Veja inherit。

Detalhes técnicos

Valor padrão： auto
Herança： Não
Produção de animação： Suportado. Veja:Atributos relacionados a animação。
Versão： CSS3
Sintaxe JavaScript： object.style.inlineSize="250px"

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta plenamente o atributo pela primeira vez.

Chrome Edge Firefox Safari Opera
57.0 79.0 41.0 12.1 44.0

Páginas relacionadas

Tutorial CSS：Altura e largura do CSS

Tutorial CSS：Modelo de caixa do CSS

Referência CSS：Atributo height

Referência CSS：Atributo width

Referência CSS：A propriedade writing-mode