--- title: <display-legacy> slug: Web/CSS/display-legacy translation_of: Web/CSS/display-legacy --- <div>{{CSSRef}}</div> <p class="summary">O CSS 2 usou uma sintaxe de palavra-chave única para o <code>display</code> , 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.</p> <h2 id="Sintaxe">Sintaxe</h2> <dl> <dt><code>inline-block</code></dt> <dd> <p>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).</p> <p>É equivalente a <code style="font-size: 1rem; letter-spacing: -0.00278rem;">inline flow-root</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">.</span></p> </dd> <dt><code>inline-table</code></dt> <dd>O <code>inline-table</code> O valor não possui um mapeamento direto em HTML. Ele se comporta como um HTML{{HTMLElement("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.<br> <br> É equivalente a <code>inline table</code>.</dd> <dt><code>inline-flex</code></dt> <dd>O elemento se comporta como um elemento embutido e apresenta seu conteúdo de acordo com o modelo flexbox.<br> <br> É equivalente a <code>inline flex</code>.</dd> <dt><code>inline-grid</code></dt> <dd>O elemento se comporta como um elemento embutido e apresenta seu conteúdo de acordo com o modelo de grade.<br> <br> É equivalente a <code>inline grid</code>.</dd> </dl> <h3 id="Sintaxe_formal">Sintaxe formal</h3> {{CSSSyntax}} <h2 id="Exemplo">Exemplo</h2> <p>No exemplo abaixo, estamos criando um contêiner flex inline com a palavra-chave herdada inline-flex.</p> <div id="Example"> <h3 id="HTML">HTML</h3> <pre class="brush: html"><div class="container"> <div>Flex Item</div> <div>Flex Item</div> </div> Not a flex item </pre> <h3 id="CSS">CSS</h3> <pre class="brush: css">.container { display: inline-flex; } </pre> <h3 id="Result">Result</h3> <p>{{EmbedLiveSample("Example", 300, 150)}}</p> </div> <p>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.</p> <pre class="brush: css">.container { display: inline flex; }</pre> <h2 id="Browser_compatibility">Compatibilidade com navegadores</h2> <h3 id="Suporte_deinline-block">Suporte de<code>inline-block</code></h3> <p>{{Compat("css.properties.display.inline-block", 10)}}</p> <h3 id="Suporte_deinline-table">Suporte de<code>inline-table</code></h3> <p>{{Compat("css.properties.display.inline-table", 10)}}</p> <h3 id="Suporte_deinline-flex">Suporte de<code>inline-flex</code></h3> <p>{{Compat("css.properties.display.inline-flex", 10)}}</p> <h3 id="Suporte_deinline-grid">Suporte de<code>inline-grid</code></h3> <p>{{Compat("css.properties.display.inline-grid", 10)}}</p> <h2 id="Veja_também">Veja também</h2> <ul> <li>{{CSSxRef("display")}} <ul> <li>{{CSSxRef("<display-outside>")}}</li> <li>{{CSSxRef("<display-inside>")}}</li> <li>{{CSSxRef("<display-listitem>")}}</li> <li>{{CSSxRef("<display-internal>")}}</li> <li>{{CSSxRef("<display-box>")}}</li> </ul> </li> </ul>