Propriedade Display

Você concluiu o exercício anterior? Se sim, você deve estar pensando: “Será que não existe outro jeito de colocar um elemento do lado do outro?”

Sim, há mais duas maneiras. As propriedades display e float são responsáveis por isso. Vamos ver como funcionam essas propriedades?

Propriedade display

Os elementos (X)HTML são de dois tipos, a saber:

• Block – um elemento do tipo block pode ser definido como sendo aquele que tem uma largura definida (como padrão, a largura da janela do browser) e são finalizados com uma quebra de linha, por exemplo, os elementos relacionados a títulos, itens de listas, e parágrafos.
• Inline – elementos do tipo inline são aqueles que, em geral, não forçam uma quebra de linha, por exemplo, os elementos relacionados ao elemento span, links, figuras e elementos textuais, como negrito, itálico, dentre outros.

Entretanto, embora os elementos sejam definidos como sendo de um desses tipos, é possível mudar a forma como eles aparecem no browser ao utilizar a propriedade display. Essa propriedade pode assumir 3 valores:

• Inline – define que o elemento não terá a quebra de linha (antes e depois).
• Block – define que o elemento será apresentado com quebra de linha antes e depois dele.
• None – define que o elemento não será mostrado. Ele fica invisível como se não existisse.

A Figura 12 ilustra um exemplo de lista, no qual os itens aparecem um ao lado do outro ao invés de um abaixo do outro. Para isso, foi utilizada a propriedade display:inline; em cada item da lista (ou seja, no elemento <li>).

A propriedade display é muito utilizada para posicionar os itens de um menu um ao lado do outro, tal como mostrado na Figura 12, ou usando o valor none, para ocultar algum elemento, principalmente quando se está definindo um estilo para impressão (você verá um exemplo do uso do valor none na Aula 8).

See the Pen autoria_web_7f12_display by Materiais (@materiais) on CodePen.