Organizando o layout com a propriedade Display
A propriedade CSS display é uma das mais poderosas e versáteis no desenvolvimento web. Ela determina o comportamento visual de um elemento HTML em relação ao seu conteúdo.
Valores possíveis da propriedade display
- none: Esconde completamente o elemento.
- block: O elemento ocupa todo o espaço disponível na linha e pode ter altura (por exemplo,
<p>,<div>). - inline: O elemento é exibido ao lado dos outros elementos do mesmo nível sem quebrar a linha.
- flex ou
flexbox: Faz com que os filhos do elemento sejam dispostos em uma configuração flexível (Flexbox). - grid: Cria um grid para organizar seus filhos.
- table: Transforma o elemento e seus filhos em uma tabela HTML.
- list-item: O elemento é tratado como um item de lista.
Efeitos da propriedade display nos elementos
- Ao usar
display: none, você está escondendo completamente o elemento do fluxo principal, mas ele continua a existir no código-fonte. - Com
display: block, os filhos do elemento podem ser dispostos em várias linhas e ocupam todo o espaço disponível na linha. Isso significa que cada filho será exibido em uma nova linha. - Ao usar
display: inlineouinline-block, os elementos são colocados ao lado um do outro sem quebrar a linha, independentemente de sua largura total.