🎯 Display: Block vs Inline

Propiedad	Block (display: block)	Inline (display: inline)
Ancho	Ocupa todo el ancho disponible	Solo ocupa el espacio necesario
Dimensiones	Permite definir width y height	No respeta width ni height
Salto de línea	Se coloca en una nueva línea	Se coloca en la misma línea
Ejemplos HTML	<div>, <p>, <h1>, <section>	<span>, <a>, <strong>, <em>

🔍 Demostración visual:

Hola, soy un párrafo BLOCK

Otro elemento BLOCK

Hola, soy INLINE

Otro elemento INLINE

Tercer elemento INLINE

INLINE-BLOCK

Otro INLINE-BLOCK

Este elemento está oculto (display: none)

← El elemento anterior no se muestra

Soy un bloque (div)

Soy inline (span) Otro span inline

Otro bloque (div)

Block: Los elementos se apilan verticalmente, uno debajo del otro
Inline: Los elementos se colocan horizontalmente en la misma línea
Inline-Block: Combina características de ambos: se colocan horizontalmente pero respetan width y height
None: El elemento se oculta completamente y no ocupa espacio