Docs ejecutables de CSS: Display en CSS

Q: ¿Qué diferencia hay entre block, inline e inline-block?

Un elemento block empieza en una línea nueva y ocupa todo el ancho disponible. Un elemento inline fluye dentro del texto e ignora width, height y los márgenes verticales. inline-block fluye dentro del texto como inline, pero acepta ancho, alto, padding y márgenes como un bloque.

Q: ¿Qué diferencia hay entre display: none y visibility: hidden?

display: none quita el elemento y su espacio. visibility: hidden lo hace invisible pero mantiene su espacio en el layout, así que nada se mueve.

Q: ¿Un div es block o inline por defecto?

Block. div, p, los títulos, ul, section y form son block por defecto; span, a, strong, em, img, input y button son inline o inline-block.

Qué hace display

Cada elemento tiene un valor de display que decide cómo se coloca en el layout. Los tres primeros que vas a encontrar son block, inline e inline-block. Aquí hay tres cajas idénticas, con el mismo width, height, padding y margin; solo cambia display:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>block, inline, inline-block</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.6; }
    .demo { border: 1px dashed #9ca3af; padding: 8px; margin-bottom: 12px; }
    .box {
      width: 120px; height: 40px;
      padding: 6px; margin: 10px;
      background: #bfdbfe; border: 2px solid #2563eb;
    }
    .block { display: block; }
    .inline { display: inline; }
    .inline-block { display: inline-block; }
  </style>
</head>
<body>
  <div class="demo">Text before <span class="box block" id="b">block</span> text after.</div>
  <div class="demo">Text before <span class="box inline" id="i">inline</span> text after.</div>
  <div class="demo">Text before <span class="box inline-block" id="ib">inline-block</span> text after.</div>
</body>
</html>

	`block`	`inline`	`inline-block`
Empieza en una línea nueva	Sí	No	No
Ancho por defecto	Ocupa el contenedor	Se ajusta al contenido	Se ajusta al contenido
`width` y `height`	Se aplican	Se ignoran	Se aplican
Margin vertical	Se aplica	Se ignora	Se aplica
Padding vertical	Empuja el contenido	Se pinta, pero no separa las líneas	Empuja el contenido
Elementos típicos	`div`, `p`, `h1`, `ul`, `section`	`span`, `a`, `strong`, `em`	`button`, `input`, `img` (los elementos reemplazados se comportan así)

En la vista previa, la caja block queda sola en su línea con 120px de ancho. La inline ignora el ancho y el alto y envuelve solo su palabra, y su padding vertical y su borde sobresalen por arriba y por abajo de la línea sin hacerla más alta. La caja inline-block se queda en la línea de texto pero conserva su tamaño completo.

display: block

Un elemento block toma todo el ancho disponible y manda lo que sigue a una línea nueva. Convertir un enlace en block es la forma de hacer clicable toda una fila:

.menu a {
  display: block;       /* the full row is the link */
  padding: 10px 16px;
}

Al ancho de un bloque se le puede dar un valor, y margin: 0 auto lo centra una vez que lo tiene, como muestra la página de cómo centrar un div.

display: inline-block

inline-block es el punto medio: fluye en una línea como una palabra, pero puedes darle tamaño. Es útil para etiquetas, botones e íconos dentro del texto:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>inline-block badges</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .badge {
      display: inline-block;
      min-width: 24px;
      padding: 2px 8px;
      margin-inline-start: 4px;
      border-radius: 999px;
      background: #dc2626; color: white;
      font-size: 12px; font-weight: 700; text-align: center;
    }
  </style>
</head>
<body>
  <p>Inbox <span class="badge">3</span></p>
  <p>Notifications <span class="badge">12</span></p>
</body>
</html>

Varias cajas inline-block en fila reciben un pequeño espacio entre ellas por el espacio en blanco del HTML. Para filas de cajas, display: flex en el padre es la mejor herramienta.

display: none vs visibility: hidden

Los dos hacen invisible un elemento. La diferencia es si conserva su espacio:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>none vs hidden</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; margin-bottom: 12px; }
    .row div { width: 70px; padding: 12px 0; text-align: center; background: #bbf7d0; border: 2px solid #16a34a; }
    .none { display: none; }
    .hidden { visibility: hidden; }
  </style>
</head>
<body>
  <div class="row"><div>1</div><div>2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="none">2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="hidden">2</div><div>3</div></div>
  <button type="button" id="toggle">Toggle box 2 in the first row</button>
  <script>
    document.getElementById('toggle').addEventListener('click', () => {
      document.querySelector('.row div:nth-child(2)').classList.toggle('none');
    });
  </script>
</body>
</html>

	`display: none`	`visibility: hidden`	`opacity: 0`
Ocupa espacio	No	Sí	Sí
Se puede hacer clic	No	No	Sí
Lo leen los lectores de pantalla	No	No	Sí
Se puede animar con suavidad	No	No	Sí

El atributo HTML hidden hace lo mismo que display: none a través de la hoja de estilo del navegador, lo que significa que cualquier regla CSS que defina display en el elemento (por ejemplo .card { display: flex; }) lo sobrescribe y el elemento vuelve a mostrarse. Agrega [hidden] { display: none !important; } si te pasa.

Para ocultar algo a la vista pero mantenerlo para los lectores de pantalla (la etiqueta de un botón con ícono, por ejemplo), usa una clase "visualmente oculta" en lugar de display: none.

display: flex y display: grid

Estos dos convierten un elemento en un contenedor de layout para sus hijos:

display: flex coloca a los hijos en una fila o una columna, con control de alineación y espaciado. Consulta flexbox.
display: grid coloca a los hijos en filas y columnas a la vez.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex and grid</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .item { padding: 10px; background: #fde68a; border: 2px solid #f59e0b; text-align: center; }
    .flex { display: flex; gap: 8px; margin-bottom: 16px; }
    .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  </style>
</head>
<body>
  <div class="flex"><div class="item">flex 1</div><div class="item">flex 2</div><div class="item">flex 3</div></div>
  <div class="grid">
    <div class="item">grid 1</div><div class="item">grid 2</div><div class="item">grid 3</div>
    <div class="item">grid 4</div><div class="item">grid 5</div>
  </div>
</body>
</html>

El contenedor en sí sigue siendo un bloque. inline-flex e inline-grid hacen lo mismo con los hijos, pero hacen que el contenedor fluya en línea, como inline-block.

Los demás valores

Valor	Qué hace
`flow-root`	Un bloque que contiene sus floats y evita que se escapen los márgenes de los hijos; el "clearfix" moderno
`contents`	La caja propia del elemento desaparece y sus hijos actúan como hijos de su padre. Evítalo en botones, listas y tablas: algunos navegadores pierden el significado del elemento para los lectores de pantalla
`list-item`	Un bloque con marcador de lista, el valor por defecto de `li`
`table`, `table-row`, `table-cell`	Layout de tabla en elementos que no son tablas
`inline-flex`, `inline-grid`	Un contenedor flex o grid que queda en línea

Errores comunes

Poner width o height en un span o un a. Los elementos inline los ignoran. Usa inline-block o block.
Margin vertical en un elemento inline. También se ignora. La misma solución.
Usar display: none para ocultar texto pensado para lectores de pantalla. También se lo oculta a ellos.
Esperar que un hijo se vea dentro de un padre con display: none. Nada dentro de un padre oculto se renderiza.
Una regla display que sobrescribe el atributo hidden. Gana la regla CSS.
Intentar animar display. Poner display: none oculta el elemento al instante, sin desvanecerlo; anima opacity y cambia display (o visibility) al final.

Preguntas frecuentes

¿Qué diferencia hay entre block, inline e inline-block?

Un elemento block empieza en una línea nueva y ocupa todo el ancho disponible. Un elemento inline fluye dentro del texto e ignora width, height y los márgenes verticales. inline-block fluye dentro del texto como inline, pero acepta ancho, alto, padding y márgenes como un bloque.

¿Qué hace display: none?

Quita el elemento de la página por completo: no ocupa espacio, no se renderiza y queda oculto para los lectores de pantalla. Sus hijos se ocultan con él y no se pueden mostrar con su propio valor de display.

¿Qué diferencia hay entre display: none y visibility: hidden?

display: none quita el elemento y su espacio. visibility: hidden lo hace invisible pero mantiene su espacio en el layout, así que nada se mueve.

¿Un div es block o inline por defecto?

Block. div, p, los títulos, ul, section y form son block por defecto; span, a, strong, em, img, input y button son inline o inline-block.

¿Por qué hay un espacio entre los elementos inline-block?

El espacio en blanco entre las etiquetas del HTML se muestra como un espacio, igual que entre palabras. Usa display: flex con gap en el padre, o quita el espacio en blanco.

Conceptos relacionados