<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 Experimental

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 quando display: 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

<display-outside> = 
block |
inline |
run-in

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

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

CSS

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

Resultado

Compatibilidade com navegadores

css.properties.display.block

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
block

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

css.properties.display.inline

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
inline

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Veja também