Block vs Inline vs Inline-Block

A propriedade display é uma das mais fundamentais do CSS. Ela determina como um elemento participa do fluxo do layout: se cria uma caixa de nível de bloco, uma caixa em linha ou algo intermediário.

Elementos de bloco começam em uma nova linha e se expandem para preencher toda a largura do contêiner. Você pode definir largura, altura, margem e preenchimento em todos os lados.

Elementos de bloco padrão: div, p, h1-h6, section, article.

Elementos em linha fluem dentro do texto. Eles não começam uma nova linha. Definir width ou height não produz efeito. A margem superior e inferior é ignorada; as margens e o preenchimento horizontais funcionam.

Elementos em linha padrão: span, a, strong, em, img.

display: inline-block é um híbrido. Os elementos fluem em linha, sem quebra de linha forçada, mas aceitam largura, altura e todas as propriedades do modelo de caixa, como os elementos de bloco.

Antes do Flexbox, inline-block era usado para barras de navegação horizontais. Uma desvantagem é que os espaços em branco no código-fonte HTML criam pequenos intervalos entre os itens.

O intervalo causado pelos espaços em branco entre elementos inline-block pode ser removido definindo font-size: 0 no elemento pai e restaurando o valor nos elementos filhos, ou eliminando os espaços em branco no HTML.

No CSS moderno, display: flex no elemento pai é a maneira preferida de criar layouts horizontais sem problemas causados por espaços em branco. inline-block ainda é útil para dimensionar um único elemento.

O tipo de display de qualquer elemento pode ser alterado com CSS. Isso é usado com frequência para dar formato de botão a links ou para tornar os itens de uma lista horizontais.

O CSS fornece display: table, display: table-row, display: table-cell etc. para aplicar o layout de tabela a elementos que não são tabelas. Hoje são raramente necessários, mas são úteis para centralização vertical em contextos antigos.

display: flow-root cria um novo contexto de formatação de bloco sem os efeitos colaterais de overflow: hidden. Ele limpa elementos flutuantes e impede que o colapso de margens escape de um contêiner.

Quando elementos de bloco e em linha são misturados como irmãos, o navegador envolve o conteúdo em linha sem elemento pai em caixas de bloco anônimas. Esse comportamento é invisível, mas explica deslocamentos inesperados no layout.

Qual valor de display permite definir width mantendo o elemento no fluxo em linha?

Os elementos de bloco ocupam toda a largura e começam uma nova linha. Os elementos em linha fluem com o texto e ignoram width e height. O inline-block combina os dois: flui em linha, mas aceita width e height. Os layouts modernos preferem Flexbox e Grid a grades de inline-block.