<display-outside>

O <display-outside> as palavras-chave especificam a parte externa do elemento display type, que é essencialmente seu papel no layout de fluxo. Essas palavras-chave são usadas como valores do display e pode ser usada para fins legados como uma única palavra-chave ou conforme definido na especificação do Nível 3, juntamente com um valor do <display-inside> palavras-chave.

Sintaxe

O <display-outside> O valor é definido usando uma palavra-chave da lista abaixo:

Valor

block
O elemento gera uma caixa de elemento de bloco, gerando quebras de linha antes e depois do elemento, quando no fluxo normal.
inline
O elemento gera uma ou mais caixas de elementos embutidos que não geram quebras de linha antes ou depois de si mesmas. No fluxo normal, o próximo elemento estará na mesma linha se houver espaço
run-in 
O elemento gera uma caixa de introdução. Se o irmão adjacente do elemento definido comodisplay: run-in box é uma caixa de bloco, o run-in box se torna a primeira caixa embutida da caixa de bloco a seguir.
Os elementos de entrada funcionam como linhas ou blocos, dependendo dos elementos circundantes. Ou seja: Se a caixa de introdução contém uma caixa de bloco, o mesmo que bloco. Se uma caixa de bloco segue a caixa de introdução, a caixa de introdução torna-se a primeira caixa embutida da caixa de bloco. Se uma caixa embutida se seguir, a caixa de introdução se tornará uma caixa de bloco.
 
 

Nota: Navegadores que suportam a sintaxe de dois valores, encontrando apenas o valor externo, como quandodisplay: block ou display: inline especificado, definirá o valor interno comoflow. Isso resultará no comportamento esperado; por exemplo, se você especificar um elemento a ser bloco, seria de esperar que os filhos desse elemento participassem do layout de fluxo normal em bloco e em linha.

Sintaxe formal

Syntax not found in DB!

Exemplo

No exemplo a seguir, os elementos de extensão (normalmente exibidos como elementos embutidos) são definidos como display: block e, assim, divida em novas linhas e expanda para preencher seu contêiner na dimensão embutida.

HTML

<span>span 1</span>
<span>span 2</span>

CSS

span {
    display: block;
    border: 1px solid rebeccapurple;
}

Resultado

Compatibilidade do navegador

BCD tables only load in the browser

Veja também