Display: Block Inside Display: Inline

Enquanto a pergunta apresenta o cenário de um elemento display:block dentro de um display:inline pai, a questão fundamental é sobre as diferenças entre esses dois valores de exibição em tal cenário.

De acordo com a especificação CSS 2.1, quando um elemento inline contém um elemento de bloco, a caixa inline é quebrada ao redor do bloco. Caixas de bloco anônimas são criadas em torno do conteúdo embutido antes e depois do bloco, e o bloco se torna irmão dessas caixas anônimas.

Isso resulta em uma estrutura onde o elemento pai, mesmo que seja definido como display: inline, se comporta de maneira diferente devido à presença do filho display:block. O elemento pai torna-se efetivamente uma caixa de bloco contendo caixas de bloco anônimas.

Diferenças entre Display: Inline e Display: Block Parent

Apesar da semelhança na estrutura, existem diferenças entre os elementos pai display:inline e display:block neste cenário:

• Fluxo de conteúdo: Os elementos inline fluem horizontalmente com o texto, enquanto os elementos de bloco fluem verticalmente. As caixas de bloco anônimas criadas em torno do pai inline permitem o empilhamento vertical de elementos filhos, simulando o comportamento do bloco.
• Geração de caixa de bloco anônima: Display:inline faz com que caixas de bloco anônimas sejam geradas para o conteúdo embutido adjacente ao filho do bloco. Este não é o caso de um pai display:block onde todo o elemento pai se torna uma caixa de bloco.
• Border Treatment: A especificação CSS 2.1 observa que certas propriedades como border ainda se aplicam a elementos que geram caixas de bloqueio anônimas. Portanto, um pai display:inline com uma borda terá a borda desenhada ao redor das caixas de bloco anônimas, criando uma borda aberta nas quebras de linha. Em contraste, um pai display:block com uma borda terá uma borda fechada ao redor de toda a caixa do bloco.
• Quebra de texto: Os elementos embutidos naturalmente envolvem o texto em torno deles. Nesse cenário, as caixas de bloco anônimas ao redor do conteúdo embutido evitam que o texto envolva o filho do bloco, como se o pai fosse um elemento display:block.