Esta página foi traduzida do inglês pela comunidade.Saiba mais e junte-se à comunidade MDN Web Docs.
<display-outside>
O<display-outside> as palavras-chave especificam a parte externa do elementodisplay type, que é essencialmente seu papel no layout de fluxo. Essas palavras-chave são usadas como valores dodisplay 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
blockO elemento gera uma caixa de elemento de bloco, gerando quebras de linha antes e depois do elemento, quando no fluxo normal.
inlineO 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-inExperimentalO elemento gera uma caixa de introdução. Se o irmão adjacente do elemento definido como
display: run-inbox é uma caixa de bloco, orun-inbox 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 oudisplay: 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
<display-outside> =
block|
inline|
run-in
Exemplo
No exemplo a seguir, os elementos de extensão (normalmente exibidos como elementos embutidos) são definidos comodisplay: 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;}