Elementos en bloque vs. elementos en línea en HTML
¿Qué significa que un elemento sea block o inline?
En HTML, cada etiqueta tiene un comportamiento por defecto en el flujo de la página.
Este comportamiento determina cómo ocupa el espacio y cómo se posiciona respecto a otros elementos.
Elementos en bloque (Block-level elements)
Que debes que saber de estos elementos
Ocupan todo el ancho de la pantalla disponible.
Siempre comienzan en una nueva línea.
Pueden contener otros elementos (en bloque o en línea).
Su altura crece según el contenido.
Ejemplo de elementos en bloque
Como se puede observar en la imagen vemos que cada uno de los elementos definidos en el HTML ocupan todo el ancho de la pantalla y se van de alguna forma apilando.
Elementos en línea (Inline elements)
Que debes que saber de estos elementos
Ocupan solo el ancho necesario para su contenido.
No comienzan en una nueva línea.
Se colocan uno al lado del otro, dentro del flujo del texto.
No se les puede asignar directamente
widthyheight(solo afecta el contenido yline-height).
Ejemplos de elementos en linea
Como se puede observar en la imagen los elementos en linea solo ocupan el ancho necesario y se van colocando uno al lado del otro. Aquí el unico elemento que no es inline es el <h1></h1>.
Tabla comparativa
| Característica | Block (display: block) | Inline (display: inline) |
| Ocupa todo el ancho | ✅ Sí | ❌ No |
| Empieza en nueva línea | ✅ Sí | ❌ No |
| Puede tener width/height | ✅ Sí | ❌ No (solo line-height) |
| Ejemplos | <div>, <p>, <h1> | <span>, <a>, <strong> |
Existe un valor intermedio inline-block
Se comporta como inline (no fuerza salto de línea) pero permite definir width y height como un bloque.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Ejemplo CSS propiedad Display</title>
<style>
.inline-block {
display: inline-block;
background: pink;
width: 120px;
height: 50px;
margin: 5px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class="inline-block">A</div>
<div class="inline-block">B</div>
<div class="inline-block">C</div>
</body>
</html>
Si copias este código y lo abrís en el navegador seguramente veas algo como esto:
En una pantalla de escritorio vemos como los bloques se ponen uno al lado del otro es decir se comportan como inline, pero si reducimos el tamaño de la pantalla y por ejemplo lo vemos un celular vemos que se ajusta cada bloque al tamaño de la pantalla y se acomodan uno abajo del otro como si fueran en bloque.
Resumen
Usa block para secciones y estructuras.
Usa inline para resaltar o enlazar texto dentro de párrafos.
Usa inline-block cuando quieras que algo esté en línea pero con tamaño controlado.
