Qual é o significado principal da propriedade display em CSS e como ela funciona?

A propriedade display determina como um elemento será exibido no documento e como ele interagirá com outros elementos, participando no fluxo de layout (layout flow). Ela define o tipo de bloco de formatação do elemento.

Valores principais:

• block: O elemento é formatado como um bloco. Ocupa toda a largura disponível, começa numa nova linha, e pode ter dimensões definidas (width, height).
• inline: O elemento é formatado como inline. Não inicia uma nova linha, ocupa apenas a largura necessária, e não pode ter dimensões definidas (width, height), nem margens verticais (margin-top, margin-bottom) ou preenchimentos internos (padding-top, padding-bottom) que afetem os elementos ao redor.
• inline-block: O elemento é formatado como inline, mas comporta-se como um bloco dentro da linha. Não inicia uma nova linha, pode ter dimensões definidas (width, height), assim como margens verticais e preenchimentos internos que afetam os elementos ao redor.
• none: O elemento e o seu conteúdo não são exibidos. O elemento é completamente removido do fluxo do documento, não ocupando espaço.
• flex: O elemento torna-se um contêiner Flex, e os seus descendentes diretos tornam-se elementos Flex. Usado para criar layouts flexíveis.
• grid: O elemento torna-se um contêiner Grid. Usado para criar layouts baseados em grelha.

Como funciona:

O navegador usa o valor display para determinar o tipo de contexto de formatação em que o elemento se encontra. Isto influencia:

• O fluxo do documento: Como o elemento é posicionado relativamente aos seus vizinhos.
• As dimensões do elemento: A possibilidade de definir largura e altura, e a influência do conteúdo nas dimensões.
• A influência nos elementos ao redor: Como as margens e dimensões do elemento afetam a disposição de outros elementos.

Exemplo:

/* Elemento com display: block */
div {
  display: block;
  width: 100%; /* Ocupa toda a largura */
  margin-bottom: 10px; /* Cria uma margem vertical */
}

/* Elemento com display: inline */
span {
  display: inline;
  /* width e height são ignorados */
  /* margin-top e margin-bottom são ignorados */
}

/* Elemento com display: inline-block */
img {
  display: inline-block;
  width: 100px; /* Pode definir a largura */
  height: 100px; /* Pode definir a altura */
  margin: 5px; /* Cria margens em todos os lados */
}

/* Elemento escondido */
.hidden {
  display: none;
}