La propiedad display en CSS

Diseño de Layouts en CSS: Introducción a la Propiedad display

Uno de los aspectos más desafiantes al aprender CSS es la creación de layouts o estructuras visuales. Organizar los elementos en pantalla de forma coherente puede ser complicado al inicio, pero es una habilidad esencial para diseñar páginas web efectivas y funcionales.

Para controlar cómo se comportan visualmente los elementos HTML en la página, CSS nos proporciona una herramienta clave: la propiedad display. Aunque no la escribamos directamente, está presente por defecto en todos los elementos del documento.

¿Qué hace la propiedad display?

La propiedad display define el tipo de caja o modelo de presentación que un elemento utilizará en el navegador. Esta propiedad es la que determina si un elemento se comporta como un bloque, se alinea en línea con otros, o si se oculta por completo.

ValorDescripción breve
noneEl elemento y sus hijos no se muestran en pantalla.
inlineLos elementos se alinean horizontalmente.
blockLos elementos se apilan verticalmente.
inline-blockCombina comportamiento en línea con posibilidad de definir tamaño.
flexActiva el modelo de cajas flexibles, ideal para estructuras unidimensionales.
inline-flexVersión en línea del modelo flex.
gridActiva el modelo Grid para crear estructuras bidimensionales.
inline-gridVersión en línea del modelo Grid.
list-itemSe comporta como un elemento de lista (<li>).
table, table-cell, table-rowEmula comportamientos de tablas HTML.
contentsElimina la caja del elemento, conservando su contenido visualmente.

Elementos inline vs block

Por defecto, los elementos HTML adoptan diferentes comportamientos. Por ejemplo:

  • <div> y <p> se renderizan como bloques, ocupando toda la línea horizontal y comenzando en una nueva línea.
  • <span> y <a> se renderizan como elementos en línea, colocándose junto a otros en la misma línea.

Ejemplo:

cssCopiarEditardiv {
  background-color: navy;
  color: white;
}

span {
  background-color: crimson;
  color: white;
}

Aquí, el <div> se comporta como un bloque, mientras que el <span> se comporta como un elemento en línea. Este comportamiento puede modificarse explícitamente:

cssCopiarEditardiv {
  display: inline;
}

Esto hace que el <div> actúe como un elemento inline, alineándose horizontalmente con otros.

El valor display: contents

Este valor especial permite que un elemento intermedio no interfiera en el flujo visual, manteniendo las relaciones directas entre elementos padres e hijos. Es útil en estructuras de diseño con grid o flex, especialmente cuando se introducen elementos envolventes por necesidades técnicas (como integraciones con frameworks o librerías).

Ejemplo práctico:

cssCopiarEditar.grid {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  gap: 10px;
}

.middle {
  display: contents;
}

.item {
  background-color: deeppink;
}

Aunque .middle envuelve a los .item, al usar display: contents, se elimina visualmente esa envoltura, permitiendo que el sistema Grid mantenga su comportamiento original.

Ocultar elementos con display: none

Cuando se asigna el valor none a display, el navegador ignora completamente el elemento y su contenido, sin renderizarlos en pantalla:

cssCopiarEditar.menu {
  display: none;
}

Esta es una de las formas más utilizadas para ocultar contenido mediante CSS. Aunque el elemento sigue existiendo en el HTML, no ocupa espacio ni es visible.

Importante: a diferencia de otras técnicas de visibilidad (como visibility: hidden), con display: none el elemento se elimina completamente del flujo del documento.

Conclusión

Comprender la propiedad display es clave para dominar el diseño web con CSS. A través de sus distintos valores, puedes controlar cómo se comportan los elementos en la página, desde estructuras simples con block o inline hasta diseños complejos con flex o grid.

En artículos siguientes exploraremos en profundidad los sistemas de diseño más avanzados como Flexbox y CSS Grid, que aprovechan al máximo esta propiedad.