visor

Cada elemento de uma página web é uma caixa rectangular. A propriedade de exibição no CSS determina exactamente como essa caixa rectangular se comporta. Há apenas um punhado de valores que são normalmente usados:

div { display: inline; /* Default of all elements, unless UA stylesheet overrides */ display: inline-block; /* Characteristics of block, but sits on a line */ display: block; /* UA stylesheet makes things like <div> and <section> block */ display: run-in; /* Not particularly well supported or common */ display: none; /* Hide */}

O valor por defeito para todos os elementos está em linha. A maioria dos “User Agent Stylesheets” (os estilos predefinidos que o navegador aplica a todos os sites) repõe muitos elementos para “bloquear”. Vamos percorrer cada um destes, e depois cobrir alguns dos outros valores menos comuns.

Inline

O valor por defeito para os elementos. Pense em elementos como <span><em>, ou <b> e como envolver texto nesses elementos dentro de uma sequência de texto não quebra o fluxo do texto.

br> O elemento <em> tem uma borda vermelha de 1px. Repare que se encontra mesmo em linha com o resto do texto.

Um elemento em linha aceitará margem e preenchimento, mas o elemento ainda se encontra em linha como seria de esperar. A margem e o acolchoamento apenas afastarão horizontalmente outros elementos, não verticalmente.

Um elemento em linha não aceitará height e width. Ignorá-lo-á.

Bloco Inline

Um elemento definido para inline-block é muito semelhante ao inline, na medida em que se definirá em linha com o fluxo natural do texto (na “linha de base”). A diferença é que poderá definir um width e height que será respeitado.

Block

Um número de elementos é definido para block pela folha de estilo do navegador UA. São normalmente elementos de contentor, como <div><section>, e <ul>. Também texto “blocos” como <p>, e <h1>. Os elementos de nível de bloco não se situam em linha, mas quebram-se para além deles. Por defeito (sem definir uma largura) ocupam o máximo espaço horizontal possível.

Run-in

First, esta propriedade não funciona no Firefox. Diz-se que a especificação para ela não está suficientemente bem definida. No entanto, para começar a compreendê-la, é como se quisesse que um elemento de cabeçalho estivesse em linha com o texto abaixo dele. Flutuá-lo não funcionará, nem nada mais, pois não quer que o cabeçalho seja filho do elemento de texto abaixo dele, quer que seja o seu próprio elemento independente. Em navegadores “de suporte”, é assim:

Flexbox

O display propriedade é também utilizada para novos métodos de layout como Flexbox.

.header { display: flex;}

Existem algumas versões mais antigas da sintaxe flexbox, por isso, consulte este artigo para a sintaxe na utilização da flexbox com o melhor suporte de browser. Certifique-se de ver este guia completo do Flexbox.

Flow-Root

The flow-root display value creates a new “block formatting context”, mas é de outra forma como block. Um novo BFC ajuda em coisas como limpar flutuadores, removendo a necessidade de hacks para o fazer.

.group { display: flow-root;}

body { display: grid;}

div { display: table; display: table-cell; display: table-column; display: table-colgroup; display: table-header-group; display: table-row-group; display: table-footer-group; display: table-row; display: table-caption;}

<div style="display: table;"> <div style="display: table-row;"> <div style="display: table-cell;"> Gross but sometimes useful. </div> </div></div>