Si estás aprendiendo CSS, entender los tipos de display te cambia la forma de construir interfaces. Aquí descubrirás cómo funcionan display block, inline e inline block, por qué afectan el tamaño de tus elementos HTML y cuándo conviene usar cada uno mientras maquetas tus primeras páginas.
La idea base es sencilla: cada etiqueta de HTML se comporta como una caja dentro del navegador, y esa caja puede ocupar todo el ancho disponible o apenas un pedacito. Ese comportamiento depende del tipo de visualización que tenga por defecto.
¿Qué son los tipos de display en CSS?
Los tipos de display definen cómo se estructuran y ubican tus elementos HTML en la pantalla. En CSS existen muchos, pero hay tres que forman la base de toda maquetación.
- display: block: la caja ocupa todo el ancho disponible de izquierda a derecha.
- display: inline: la caja ocupa solo el espacio que necesita su contenido.
- display: inline block: la caja se ubica al lado de otras, pero acepta tamaño personalizado.
¿Qué significa display en CSS? Es la propiedad que indica cómo se visualiza un elemento en el navegador. Define si la caja ocupa toda la línea, solo su contenido o una mezcla de ambos comportamientos.
¿Cómo se comporta display block?
Los elementos con display: block se despliegan a lo ancho completo del contenedor. Si abres el inspector del navegador y quitas el ancho fijo de un H1, verás que se estira de borde a borde. Lo mismo pasa con un H2: por defecto ambos son block.
Esto significa que cualquier elemento siguiente se va a ubicar debajo, nunca al lado. Es el comportamiento típico de títulos, párrafos, divs y secciones.
¿Cómo se comporta display inline?
Los elementos inline solo ocupan el espacio de su contenido y se ubican uno al lado del otro. Un label, por ejemplo, es inline por defecto.
Y aquí viene lo interesante: aunque le apliques width y height, esas propiedades se ignoran. Si en el inspector defines 310 píxeles de ancho y 50 píxeles de alto a un label, el navegador te muestra los valores en los estilos, pero la caja sigue del mismo tamaño en pantalla.
¿Por qué un elemento inline ignora width y height? Porque su naturaleza es adaptarse al contenido. CSS bloquea esas propiedades en elementos inline para mantener el flujo de texto continuo.
¿Qué hace especial a display inline block?
Este tipo combina lo mejor de los dos mundos anteriores. Los elementos se colocan uno al lado del otro como si fueran inline, pero sí aceptan medidas personalizadas como block.
Los input y los button son inline block por defecto. Por eso, si les das un width de 310 píxeles y un height de 50 píxeles, vas a ver el cambio reflejado en el navegador de inmediato.
¿Cómo identificar el display de un elemento en el navegador?
El inspector de tu navegador es la herramienta clave. Estos son los pasos que puedes seguir para diagnosticar cualquier caja:
- Haz clic derecho sobre el elemento y selecciona inspeccionar.
- Ve a la sección de estilos en la parte inferior del panel.
- Revisa los valores de width y height que muestra la caja.
- Compara si esos valores se reflejan visualmente o si el elemento los ignora.
Si aplicas tamaño y no cambia nada, probablemente es inline. Si cambia, es block o inline block.
¿Cómo experimentar con display usando background color?
Una técnica práctica para visualizar el comportamiento es asignar colores de fondo distintos a cada etiqueta. Así puedes ver con claridad el espacio que ocupa cada caja.
- Aplica background color: tomato al label.
- Aplica background color: aqua al input.
- Aplica background color: violet al button.
Después de pintar las cajas, agrega width y height a cada una. Vas a notar que el label conserva su tamaño original, mientras que input y button crecen hasta los 310 píxeles de ancho y 50 píxeles de alto que definiste.
¿Cuándo usar cada tipo de display?
La elección depende del rol que cumpla el elemento dentro de tu interfaz. Una buena regla práctica es esta:
- Usa block para estructuras grandes: títulos, secciones, contenedores principales.
- Usa inline para texto y enlaces que deben fluir dentro de un párrafo.
- Usa inline block cuando necesites controlar el tamaño pero mantener varios elementos en la misma fila.
Indentar bien tu código y mantener buenas prácticas hace que estos cambios sean fáciles de leer y modificar. Conforme avances, descubrirás más diferencias entre cada tipo de display y aparecerán otros como flex o grid que amplían tus posibilidades.
Cuéntame en los comentarios qué colores usaste, qué ancho y alto le diste a tus elementos, y comparte tu resultado para revisarlo juntos.
