Pantalla: Bloque dentro de Pantalla: En línea

Si bien la pregunta plantea el escenario de un elemento display:block dentro de un elemento display:inline, la pregunta fundamental es sobre las diferencias entre estos dos valores de visualización en tal escenario.

De acuerdo con la especificación CSS 2.1, cuando un elemento en línea contiene un elemento de bloque, el cuadro en línea se divide alrededor del bloque. Los cuadros de bloque anónimos se crean alrededor del contenido en línea antes y después del bloque, y el bloque se convierte en un hermano de estos cuadros anónimos.

Esto da como resultado una estructura donde el elemento principal, aunque esté definido como visualización: en línea, se comporta de manera diferente debido a la presencia del elemento display:block child. El elemento principal se convierte efectivamente en un cuadro de bloque que contiene cuadros de bloque anónimos.

Diferencias entre Display: Inline y Display: Block Parent

A pesar de la similitud en la estructura, existen diferencias sutiles diferencias entre display:inline y display:block elementos principales en este escenario:

• Flujo de contenido: Los elementos en línea fluyen horizontalmente con el texto, mientras que los elementos de bloque fluyen verticalmente. Los cuadros de bloques anónimos creados alrededor del padre en línea permiten el apilamiento vertical de elementos secundarios, simulando el comportamiento del bloque.
• Generación de cuadros de bloques anónimos: Display:inline hace que se generen cuadros de bloques anónimos para el contenido en línea adyacente al bloque secundario. Este no es el caso con display:block padre, donde todo el elemento padre se convierte en un cuadro de bloque.
• Tratamiento de borde: La especificación CSS 2.1 señala que ciertas propiedades, como borde, todavía se aplica a elementos que generan cuadros de bloqueo anónimos. Por lo tanto, un padre display:inline con un borde tendrá el borde dibujado alrededor de los cuadros de bloque anónimos, creando un borde abierto en los saltos de línea. Por el contrario, un display:block padre con un borde tendrá un borde cerrado alrededor de todo el cuadro del bloque.
• Ajuste de texto: Los elementos en línea envuelven el texto de forma natural a su alrededor. En este escenario, los cuadros de bloque anónimos que rodean el contenido en línea evitan que el texto se ajuste alrededor del bloque secundario, como si el padre fuera un elemento display:block.