a propriedade "display"

display é a propriedade mais importante do CSS para controlar o layout. Cada elemento tem um valor padrão para o display dependendo de seu tipo. O valor padrão na maioria dos elementos é normalmente block ou inline. Um elemento com valor block é chamado de elemento de nível de bloco ou apenas elemento de bloco. Um elemento com valor inline é sempre chamado de elemento de linha.

block

<div>

div é o exemplo de bloco mais comum. O elemento de bloco sempre começa em uma nova linha e se expande pra esquerda e direita o tanto quanto for possível. Outros elementos de bloco comuns são p e form, e agora no HTML5 temos: header, footer, section e outros.

</div>

inline

span é o elemento de linha padrão. Um elemento de linha pode preencher algum texto dentro de um parágrafo <span> como esse </span> sem quebrar o fluxo daquele parágrafo. O elemento a é o elemento de linha mais comum, já que ele é utilizado para links.

none

Outro valor comum do display é o none. Alguns elementos específicos como o script utilizam este valor por padrão. Ele é normalmente utilizado através do JavaScript para esconder e exibir elementos sem realmente os remover nem recriar.

Ele é bem diferente de visibility. Marcando o display com o valor none vai exibir a página como se o elemento não existisse. Com visibility:hidden o elemento fica invisível, porém ele permanece ocupando o espaço em que estaria totalmente visível.

You found me!

outros valores da propriedade display

Existem vários outros valores diferentes para o display, tais como: list-item e table. Veja aqui a listagem de todos. Ainda vamos discutir sobre inline-block e flex mais adiante.

bônus

Como mencionei, cada elemento possui um tipo padrão de display. No entanto, você sempre poderá substituí-los! Embora não faça sentido uma div no modo de linha, você pode fazer isso para personalizar a visualização de elementos com semânticas particulares. Um exemplo comum é aplicar display:inline no elemento li para menus horizontais.

  • Creative Commons License