¿Cuál es la diferencia entre elementos block e inline?

Question

Accepted Answer

Cada elemento tiene un comportamiento **display** predeterminado que controla cómo fluye en el diseño. - Los elementos **block** comienzan en una **nueva línea** y ocupan el **ancho completo disponible**. Aceptan width/height y todos los márgenes/rellenos. Ejemplos: `

`, `

`, `
`, `
`. - Los elementos inline fluyen dentro de una línea, solo tan anchos como su contenido, e ignoran width/height y márgenes superior/inferior. Ejemplos: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## Una trampa práctica ```css span { width: 200px; height: 50px; } /* ❌ ignored — span is inline / ``` Establecer `width`/`height` en un elemento inline no hace nada. La solución es cambiar su display: ```css span { display: inline-block; width: 200px; } / ✅ flows inline BUT respects size / ``` ## inline-block — lo mejor de ambos `inline-block` se sitúa en el flujo de texto (lado a lado) y* respeta width/height/márgenes — perfecto para elementos de navegación, insignias o botones dispuestos en una fila. ```text block → new line, full width, sizeable inline → in-line, content width, NOT sizeable (vertically) inline-block → in-line, content flow, sizeable ``` ## Por qué es importante Comprender el display predeterminado explica por qué tu `` no toma altura, por qué los `
`s se apilan, y cuándo cambiar a `inline-block`, `flex` o `grid`. Es la base de cómo se organizan los elementos antes de aplicar cualquier sistema de diseño.