Propriedade Display Entendendo e manipulando o fluxo dos elementos

Entender a propriedade display é fundamental para que possamos compreender o fluxo e estruturação de uma página web. Todos os elementos por padrão já possuem um valor para a propriedade e, geralmente estas são block ou inline.

Essa propriedade CSS especifica o tipo de renderização do elemento na página. Uma definição que pode auxiliar no entendimento da propriedade é a do Chris Coyier, bastante reconhecido no mundo do CSS, que é a seguinte:

Todo elemento em uma página web é renderizado como uma caixa retangular. A propriedade display de CSS vai determinar como essa caixa vai ser comportar

Os possíveis tipos

Block

O elemento se comporta como um bloco. Ocupando praticamente toda a largura disponível na página. Elementos de parágrafo (p) e título(h1, h2, ...) possuem esse comportamento por padrão.

Inline

O elemento se comporta como um elemento em linha. Exemplos de elemento que se comportam assim são por exemplo as tags span e a.

None

Ao contrários dos valores atuais, o valor none permite, informalmente dizendo, que você desative a propriedade do elemento. Quando você utiliza essa propriedade, o elemento e todos seus elementos filhos não são renderizados na página.

Uma coisa importante a ressaltar que a propriedade display: none não é a mesma coisa da propriedade visibility: hidden. Nessa última o elemento não aparece na tela mas é renderizado na página, ou seja, vemos um espaço vazio no lugar do elemento; já a propriedade display: none não renderiza o elemento e, o espaço que era ocupado por ele, é ocupado pelo elemento seguinte no fluxo do documento.

Table

O elemento se comporta como uma tabela.

Inline-block

Semelhante ao inline, no entanto, ao definirmos inline-block em um elemento, conseguimos definir as propriedades de largura e altura para ele. Coisa que não conseguimos em um elemento com display: inline.