<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

<display-legacy> = 
inline-block |
inline-table |
inline-flex |
inline-grid

Exemplo

No exemplo abaixo, estamos criando um contêiner flex inline com a palavra-chave herdada inline-flex.

HTML

html
<div class="container">
  <div>Flex Item</div>
  <div>Flex Item</div>
</div>

Not a flex item

CSS

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.

css
.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

Veja também