<display-legacy>
O CSS 2 usou uma sintaxe de palavra-chave única para o display
, exigindo palavras-chave separadas para variantes em nível de bloco e em linha do mesmo modo de layout. Esta página detalha esses valores.
Sintaxe
inline-block
-
O elemento gera uma caixa de elemento de bloco que fluirá com o conteúdo circundante, como se fosse uma única caixa embutida (se comportando como um elemento substituído).
É equivalente a
inline flow-root
. inline-table
-
O
inline-table
O valor não possui um mapeamento direto em HTML. Ele se comporta como um HTML<table>
elemento, mas como uma caixa embutida, em vez de uma caixa no nível do bloco. Dentro da caixa da tabela há um contexto em nível de bloco.É equivalente a
inline table
. inline-flex
-
O elemento se comporta como um elemento embutido e apresenta seu conteúdo de acordo com o modelo flexbox.
É equivalente a
inline flex
. inline-grid
-
O elemento se comporta como um elemento embutido e apresenta seu conteúdo de acordo com o modelo de grade.
É equivalente a
inline grid
.
Sintaxe formal
Exemplo
No exemplo abaixo, estamos criando um contêiner flex inline com a palavra-chave herdada inline-flex.
HTML
<div class="container">
<div>Flex Item</div>
<div>Flex Item</div>
</div>
Not a flex item
CSS
.container {
display: inline-flex;
}
Result
Na nova sintaxe, o contêiner flex inline seria criado usando dois valores, inline para o tipo de exibição externo e flex para o tipo de exibição interno.
.container {
display: inline flex;
}
Compatibilidade com navegadores
Suporte deinline-block
css.properties.display.inline-block
BCD tables only load in the browser
css.properties.display.inline-table
BCD tables only load in the browser
css.properties.display.inline-flex
BCD tables only load in the browser
css.properties.display.inline-grid
BCD tables only load in the browser
Suporte deinline-table
css.properties.display.inline-block
BCD tables only load in the browser
css.properties.display.inline-table
BCD tables only load in the browser
css.properties.display.inline-flex
BCD tables only load in the browser
css.properties.display.inline-grid
BCD tables only load in the browser
Suporte deinline-flex
css.properties.display.inline-block
BCD tables only load in the browser
css.properties.display.inline-table
BCD tables only load in the browser
css.properties.display.inline-flex
BCD tables only load in the browser
css.properties.display.inline-grid
BCD tables only load in the browser
Suporte deinline-grid
css.properties.display.inline-block
BCD tables only load in the browser
css.properties.display.inline-table
BCD tables only load in the browser
css.properties.display.inline-flex
BCD tables only load in the browser
css.properties.display.inline-grid
BCD tables only load in the browser