Propiedad CSS display

La propiedad display es una de las propiedades CSS más importantes para controlar el diseño. Define el tipo de caja de renderizado que genera un elemento HTML — si se sitúa en su propia línea, fluye de forma inline junto al texto, se convierte en un contenedor flex o grid, o desaparece por completo.

Este capítulo explica qué hace cada valor de display, la diferencia entre la visualización externa (cómo se comporta la caja respecto a sus hermanos) y la interna (cómo se distribuyen sus hijos), los errores más comunes y ejemplos ejecutables para cada valor clave.

Por qué importa la propiedad display

Cada elemento comienza con un valor display predeterminado que proporciona la hoja de estilos del agente de usuario del navegador — <div> y <p> tienen por defecto block, <span> y <a> tienen por defecto inline, <li> tiene por defecto list-item, y así sucesivamente. Con display puedes sobreescribir ese valor predeterminado. Por ejemplo, un elemento de nivel bloque puede fluir inline configurando display: inline, y una lista de enlaces puede convertirse en una barra de navegación horizontal.

Dos notas adicionales sobre los valores predeterminados:

• En HTML, el display inicial de un elemento proviene de la especificación HTML o de la hoja de estilos del navegador/usuario, no del valor predeterminado de la palabra clave display: inline que aparece en la especificación CSS.
• En XML (que no tiene estilos integrados), todos los elementos realmente tienen por defecto inline.

CSS antiguo frente a moderno: en especificaciones anteriores, width y height no tenían efecto en los elementos inline. La nota sigue apareciendo en muchos tutoriales, pero en la práctica los navegadores ignoran width/height en una caja inline simple. Para dimensionar un elemento y mantenerlo en la línea, usa inline-block.

Tipos de caja en CSS

Existen varios formatos principales de caja en CSS:

• Inline — Las cajas de nivel inline fluyen dentro de una línea de texto y no fuerzan un salto de línea. <span>, <em> y <img> son inline por defecto. Una caja inline acepta padding y márgenes, pero el padding/margen vertical no separa las líneas vecinas, y width/height se ignoran. Para dimensionar la caja manteniéndola en la línea, usa inline-block. (Consulta elementos de bloque e inline.)
• Inline-block — Se comporta como una caja inline (se sitúa en la línea junto al texto y otro contenido inline), pero sí respeta width, height y los márgenes/padding verticales. Este es el valor que debes usar cuando quieres un dimensionado de tipo caja sin saltar a una nueva línea.
• Block — Las cajas de nivel bloque comienzan en una nueva línea y, por defecto, se extienden para llenar el ancho disponible de su contenedor. Pueden contener otras cajas de nivel bloque. <p>, <ul>, <h1>-<h6>, <div>, <section> y <ol> son de nivel bloque por defecto.
• Flex — display: flex genera un contenedor flex de nivel bloque y distribuye sus hijos directos a lo largo de un único eje. Consulta La guía definitiva de Flexbox.
• Grid — display: grid genera un contenedor grid de nivel bloque y distribuye sus hijos en dos dimensiones (filas y columnas). Consulta la propiedad grid.
• Valores de tabla — Valores como table, table-row y table-cell hacen que los elementos no-tabla se comporten como los elementos de tabla HTML correspondientes. inline-table se comporta como un <table> pero como una caja inline; dentro de la caja de tabla se establece un contexto de nivel bloque.

Visualización externa vs. interna: el CSS moderno describe display como dos partes. El valor externo (block o inline) controla cómo participa la caja en el diseño de su padre; el valor interno (flow, flex, grid, table) controla cómo la caja distribuye sus propios hijos. Por eso flex convierte un elemento en una caja de nivel bloque y en un contenedor flex al mismo tiempo.

Sintaxis

Sintaxis de la propiedad CSS display

display: inline | block | contents | flex | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit;

Ejemplo de la propiedad display:

Ejemplo de la propiedad CSS display con el valor inline

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .display li {
        display: inline;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <p>Here the list item is with its initial value:</p>
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
    <p>Here the list item is used with the display property. The "inline" value is used:</p>
    <ul class="display">
      <li>List item 1</li>
      <li>List item 2</li>
    </ul>
  </body>
</html>

Resultado

Cuando se aplica display: inline a los elementos de lista, ya no comienzan cada uno en una nueva línea — en cambio, se sitúan uno al lado del otro, separados únicamente por el margin-right que hayas definido.

Ejemplo de la propiedad display con los valores "inline" y "block":

Ejemplo de la propiedad CSS display con los valores inline y block

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .inline {
        border: 1px solid #1c87c9;
        display: inline;
      }
      .block {
        border: 1px solid #1c87c9;
        display: block;
        height: 30px;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <p>Here the list item is with "initial" value. We see that the "inline" value does not accept height and width:</p>
    <span>This is some text.</span>
    <span class="inline">This is another text.</span>
    <hr />
    <p>Here the list item is used with the "block" value of the display property:</p>
    <span class="block">This is some text.</span>
    <span class="block">This is another text.</span>
  </body>
</html>

El primer par de <span>s permanece en una sola línea porque inline ignora width y height. Los <span> con .block, en cambio, ocupan cada uno una línea completa y respetan el ancho de 300px y el alto de 30px.

Ejemplo de la propiedad display con el valor "block":

Ejemplo de la propiedad CSS display con el valor block

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .block {
        display: block;
        border: 1px solid #666;
        background-color: #eee;
        padding: 10px;
        width: 200px;
      }
      .hello {
        border: 1px solid #1c87c9;
        background-color: #8ebf42;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <div class="block">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      <div class="hello">HELLO!</div>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>

Ejemplo de la propiedad display con el valor "contents":

Ejemplo de la propiedad CSS display con el valor contents

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .contents {
        display: contents;
      }
      .hello {
        border: 1px solid #1c87c9;
        background-color: #ccc;
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <div class="contents">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      <div class="hello">HELLO!</div>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>

Con display: contents, el contenedor .contents no genera ninguna caja propia — su borde y fondo serían ignorados, y sus hijos (el texto y la caja .hello) se comportan como si fueran hijos directos de <body>.

Ejemplo de la propiedad display con el valor "flex":

Ejemplo de la propiedad CSS display con el valor flex

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #flex {
        width: 300px;
        height: 100px;
        border: 1px solid #c3c3c3;
        display: flex;
        justify-content: center;
      }
      div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <p>Here the "display: flex;" is used:</p>
    <div id="flex">
      <div style="background-color: #1c87c9;">1</div>
      <div style="background-color: #666;">2</div>
      <div style="background-color: #8ebf42;">3</div>
    </div>
  </body>
</html>

Valores

display: none frente a visibility: hidden

Un punto de confusión frecuente: display: none elimina el elemento del flujo del documento por completo — no ocupa espacio, como si hubiera sido eliminado. visibility: hidden oculta el elemento pero mantiene su caja, por lo que sigue reservando el espacio que habría ocupado. Usa display: none para contraer el diseño y visibility: hidden para ocultar preservando el hueco en el diseño.

Propiedades relacionadas

• La guía definitiva de Flexbox — todo lo que desbloquea display: flex.
• grid — construir diseños bidimensionales con display: grid.
• visibility — ocultar elementos sin eliminarlos del flujo.
• position y float — otras formas de controlar cómo se colocan las cajas.
• Elementos de bloque e inline — los valores predeterminados HTML que sobreescribe display.

Práctica