display

display es la propiedad que define el tipo de caja que genera un elemento y la manera en que ese elemento participa en el flujo del documento. Sin display, el navegador no sabría si un elemento debe apilarse verticalmente como un bloque, fluir en línea con el texto, ocupar todo el ancho disponible o desaparecer por completo del render. Es, en ese sentido, la propiedad más fundamental de CSS después del box model: mientras el box model describe qué hay dentro de la caja, display describe cómo esa caja se relaciona con el mundo exterior.

Cada elemento HTML tiene un valor de display por defecto definido por la hoja de estilos del navegador (el UA stylesheet). Los <div>, <p>, <section> y la mayoría de los elementos semánticos nacen como block; los <span>, <a>, <strong> nacen como inline; los <li> como list-item. Esos valores por defecto son el punto de partida, no un límite: con CSS podés cambiarlos libremente. Un <a> puede ser block; un <div> puede ser inline-block. display cambia la representación visual de la caja, no la semántica del elemento — un <li> con display: inline sigue siendo un ítem de lista para los lectores de pantalla y los motores de búsqueda.

La propiedad acepta muchos valores, pero los que controlan el flujo normal son cuatro: block, inline, inline-block y none. A partir de flex y grid (valores que no se desarrollan acá) el elemento deja de participar del flujo normal y adopta un nuevo modelo de layout propio.

Cómo funciona

El navegador construye el árbol de renderizado a partir del HTML y asigna a cada elemento un contexto de formato: bloques que se apilan en el eje vertical, o ítems de línea que fluyen en el eje horizontal. display es la propiedad que dicta en cuál de esos contextos vive cada elemento.

Cuando un elemento es block, el navegador crea un bloque de formato de bloque (block formatting context): el elemento ocupa todo el ancho de su contenedor, genera un salto de línea antes y después, y se pueden controlar sus dimensiones con width y height. Cuando es inline, el elemento entra al flujo del texto de su línea: no rompe el flujo, no ocupa el ancho completo y las propiedades de dimensión (width, height) se ignoran completamente.

inline-block es el caso especial: genera una caja que fluye en línea con el texto, pero internamente se comporta como un bloque — acepta width, height y márgenes verticales reales. Es el puente entre los dos mundos y la herramienta correcta para botones o badges que deben vivir dentro de una línea de texto pero tener dimensiones propias.

none, por su parte, elimina el elemento del árbol de renderizado por completo: ni ocupa espacio ni genera caja. No es lo mismo que visibility: hidden, que oculta el elemento visualmente pero mantiene su espacio reservado en el layout.

Sintaxis

.elemento {
  display: block;
}

Valores

block

Con display: block el elemento genera una caja de bloque. Ocupa todo el ancho disponible de su contenedor (no de la pantalla — del elemento padre) e impone un salto de línea implícito antes y después. No hay forma de poner un segundo elemento block al costado en flujo normal.

Las propiedades de dimensión funcionan completamente: width, height, margin-top y margin-bottom afectan el layout. Si no se declara width, el bloque crece hasta llenar el contenedor. Si no se declara height, crece para acomodar el contenido interno.

Elementos que son block por defecto: <div>, <p>, <h1>–<h6>, <section>, <article>, <header>, <footer>, <main>, <nav>, <ul>, <ol>, <blockquote>, <form>.

.caja {
  display: block;
  width: 320px;
  padding: 16px;
  margin-bottom: 12px;
}

inline

Con display: inline el elemento fluye dentro de la línea de texto como si fuera una palabra más. No genera saltos de línea: el elemento siguiente se coloca al costado si hay espacio disponible, o cae a la línea siguiente cuando la línea se llena — exactamente igual que el texto en un párrafo.

La limitación importante: width y height se ignoran. El ancho de un elemento inline lo determina su contenido, no el CSS. Tampoco funcionan margin-top ni margin-bottom para desplazar el flujo (los márgenes verticales se calculan pero no empujan a los elementos vecinos). margin-left y margin-right sí funcionan.

Elementos que son inline por defecto: <span>, <a>, <strong>, <em>, <small>, <mark>, <abbr>, <code>, <time>, <label>.

.etiqueta {
  display: inline;
  /* width: 200px → se ignora */
  /* margin-top: 12px → no desplaza el flujo */
  margin-left: 4px;  /* esto sí funciona */
}

Excepción — <img>: es inline por defecto pero acepta width y height porque es un replaced element: el navegador provee su contenido, no el HTML. No necesitás cambiarlo a inline-block para darle dimensiones.

inline-block (el híbrido)

Con display: inline-block el elemento fluye en la línea de texto (como inline) pero acepta width, height y márgenes verticales reales (como block). Es la herramienta correcta para botones de navegación, etiquetas de categoría, badges y cualquier elemento que necesite dimensiones fijas pero deba convivir con texto en la misma línea.

.btn-nav {
  display: inline-block;
  width: 120px;
  padding: 8px 0;
  text-align: center;
  background: #fef3c7;
  border: 1px solid #d97706;
}

inline-block para layout de columnas — legacy: antes de Flexbox y Grid se usaba inline-block para crear columnas. Hoy ese patrón está reemplazado. Usá inline-block para los casos de componentes inline con dimensiones, no para layouts completos.

none

Con display: none el elemento desaparece del flujo y del render por completo. No ocupa espacio, no genera caja y sus hijos tampoco se renderizan. Es como si el elemento no existiera en el HTML.

Es distinto de visibility: hidden: ese valor oculta el elemento visualmente pero mantiene su espacio reservado en el layout — el hueco sigue ahí. Con display: none el espacio también desaparece.

/* ocultar el menú móvil en desktop */
.menu-mobile {
  display: none;
}

/* mostrar/ocultar con JavaScript */
.tooltip {
  display: none; /* oculto por defecto */
}
.tooltip.activo {
  display: block; /* se muestra al activar */
}

flex y grid (mención)

display: flex convierte el elemento en un contenedor flex: sus hijos directos se convierten en flex items distribuidos en una dimensión (fila o columna). display: grid convierte el elemento en un contenedor grid: sus hijos directos se organizan en un sistema de filas y columnas bidimensional. Ambos valores sacan a los hijos directos del flujo normal y les aplican su propio modelo de layout.

Estos modelos tienen su propia familia de entradas — ver flexbox y CSS Grid (próximamente).

Ejemplo realista

Menú de navegación horizontal: los <li> son list-item por defecto (se apilan). Para que queden en la misma línea y tengan dimensiones uniformes, se usan inline-block:

.nav-item {
  display: inline-block;
  width: 140px;
  padding: 10px 0;
  text-align: center;
  background: #1e293b;
  border-right: 1px solid #334155;
}

<nav>
  <ul>
    <li class="nav-item">Inicio</li>
    <li class="nav-item">Menú</li>
    <li class="nav-item">Contacto</li>
  </ul>
</nav>

Cuándo usar qué

Notas, gotchas e interacción

• inline ignora width, height y márgenes verticales: es el error más frecuente al aprender display. Si declarás width: 200px en un <span> sin cambiar su display, el valor se ignora en silencio. El ancho lo determina el contenido.
• display: none vs visibility: hidden: none elimina el elemento del flujo (el espacio desaparece); hidden lo hace invisible pero el espacio permanece ocupado. Elegir uno u otro cambia el layout de los elementos vecinos.
• Cambiar display no cambia la semántica: un <h2> con display: inline sigue siendo un heading de nivel 2 para accesibilidad. CSS controla la presentación; el HTML controla el significado.
• inline-block y los espacios en blanco del HTML: dos elementos inline-block consecutivos separados por un salto de línea en el HTML generan un pequeño espacio entre ellos (el espacio corresponde al carácter de newline). Para eliminarlo se puede usar font-size: 0 en el padre o colocar los elementos sin espacio entre ellos en el HTML. Flexbox y Grid no tienen este problema.
• Interacción con el box model: cambiar display a inline en un elemento que ya tiene width y height declarados hace que esas propiedades se ignoren — el tamaño vuelve a ser determinado por el contenido. Recordalo al depurar elementos que parecen no respetar sus dimensiones.
• display y el contexto de formato: un elemento block o inline-block crea un block formatting context (BFC) si tiene overflow distinto de visible. Esto afecta cómo se comportan los floats y el colapso de margins internos.

Vigente / legacy

block, inline, inline-block y none son valores vigentes sin alternativa ni reemplazante — son la base del modelo de caja de CSS y no van a desaparecer. flex y grid complementan el modelo para casos de layout complejo; no reemplazan block/inline (siguen siendo el flujo normal por defecto).

La especificación CSS Display Level 3 introduce la notación de dos palabras clave (display: block flow, display: inline flow-root) para separar el contexto externo del interno. Los navegadores modernos la soportan, pero la notación de una sola palabra sigue siendo la estándar en la práctica y no hay razón para migrar.

Aprendelo en el recorrido

Esta propiedad se practica en el módulo Display: block e inline del recorrido.