Propiedad Display en CSS

La propiedad display es una de las más importantes y versátiles en CSS, ya que determina cómo se muestra un elemento en la página. Esta propiedad afecta tanto al comportamiento del elemento como a la interacción con los elementos que lo rodean. En este artículo, exploraremos en profundidad los diferentes valores de la propiedad display y cómo utilizarlos eficazmente.

Valores básicos de display

display: block

Los elementos con display: block ocupan todo el ancho disponible de su contenedor y crean una nueva línea antes y después del elemento.

.block-element {
  display: block;
}

Características principales:

• Ocupa el 100% del ancho disponible por defecto
• Comienza en una nueva línea
• Respeta propiedades como width, height, margin y padding en todas direcciones
• Los elementos de bloque pueden contener otros elementos de bloque o en línea

Elementos HTML que son block por defecto:

• <div>
• <p>
• <h1> a <h6>
• <section>
• <article>
• <ul>, <ol>, <li>
• <form>

Ejemplo práctico:

<div class="container">
  <div class="block-element">Este es un elemento block</div>
  <div class="block-element">Este es otro elemento block</div>
</div>

.container {
  width: 80%;
  margin: 0 auto;
  border: 1px solid #ccc;
}

.block-element {
  background-color: #f0f0f0;
  padding: 20px;
  margin: 10px 0;
  border: 1px solid #999;
}

display: inline

Los elementos con display: inline ocupan solo el espacio necesario para su contenido y no crean saltos de línea.

.inline-element {
  display: inline;
}

Características principales:

• Ocupa solo el espacio necesario para su contenido
• No crea saltos de línea
• Ignora propiedades como width y height
• Los márgenes y paddings solo afectan horizontalmente, no verticalmente
• No puede contener elementos de bloque

Elementos HTML que son inline por defecto:

• <span>
• <a>
• <strong>, <em>
• <i>, <b>
• <small>
• <code>
• <img> (aunque tiene algunas características especiales)

Ejemplo práctico:

<div class="container">
  <span class="inline-element">Este es un elemento inline</span>
  <span class="inline-element">Este es otro elemento inline</span>
  <span class="inline-element">Y un tercero</span>
</div>

.container {
  width: 80%;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 20px;
}

.inline-element {
  background-color: #f0f0f0;
  padding: 5px 10px;
  margin: 0 5px;
  border: 1px solid #999;
}

display: inline-block

Los elementos con display: inline-block combinan características de elementos en línea y de bloque.

.inline-block-element {
  display: inline-block;
}

Características principales:

• Se coloca en línea como los elementos inline
• Respeta propiedades como width, height, margin y padding en todas direcciones
• No crea saltos de línea automáticamente
• Puede contener otros elementos

Ejemplo práctico:

<div class="container">
  <div class="inline-block-element">Elemento 1</div>
  <div class="inline-block-element">Elemento 2 con más contenido</div>
  <div class="inline-block-element">Elemento 3</div>
</div>

.container {
  width: 80%;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 20px;
}

.inline-block-element {
  display: inline-block;
  width: 150px;
  height: 100px;
  background-color: #f0f0f0;
  padding: 10px;
  margin: 5px;
  border: 1px solid #999;
  vertical-align: top;
}

display: none

Los elementos con display: none no se muestran en la página y no ocupan espacio.

.hidden-element {
  display: none;
}

Características principales:

• El elemento no se muestra en absoluto
• No ocupa espacio en el layout
• El elemento sigue existiendo en el DOM, pero es como si no estuviera ahí
• Los lectores de pantalla no detectan estos elementos

Diferencia con visibility: hidden:

• visibility: hidden oculta el elemento pero mantiene su espacio en el layout
• display: none elimina completamente el elemento del flujo del documento

Ejemplo práctico:

<div class="container">
  <div class="visible-element">Este elemento es visible</div>
  <div class="hidden-element">Este elemento no se ve</div>
  <div class="visible-element">Este elemento también es visible</div>
</div>

.container {
  width: 80%;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 20px;
}

.visible-element {
  background-color: #f0f0f0;
  padding: 20px;
  margin: 10px 0;
  border: 1px solid #999;
}

.hidden-element {
  display: none;
  background-color: #ffe0e0;
  padding: 20px;
  margin: 10px 0;
  border: 1px solid #ff9999;
}

Valores avanzados de display

display: flex

Flex es un modelo de diseño unidimensional que permite distribuir espacio y alinear elementos de manera flexible.

.flex-container {
  display: flex;
}

Características principales:

• Convierte al elemento en un contenedor flex
• Los hijos directos se convierten en elementos flex
• Permite alineación, distribución y reordenamiento de elementos
• Funciona en una sola dimensión (fila o columna)

Propiedades relacionadas:

• flex-direction: Define la dirección principal (row, column, row-reverse, column-reverse)
• justify-content: Alinea elementos en el eje principal
• align-items: Alinea elementos en el eje cruzado
• flex-wrap: Controla si los elementos pueden saltar a nuevas líneas
• gap: Espacio entre elementos flex

Ejemplo práctico:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
</div>

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f0f0f0;
  padding: 20px;
  height: 200px;
  border: 1px solid #999;
}

.flex-item {
  background-color: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 24px;
  width: 70px;
}

display: grid

Grid es un modelo de diseño bidimensional que permite crear layouts complejos con filas y columnas.

.grid-container {
  display: grid;
}

Características principales:

• Convierte al elemento en un contenedor grid
• Los hijos directos se convierten en elementos grid
• Permite definir explícitamente filas y columnas
• Funciona en dos dimensiones simultáneamente

Propiedades relacionadas:

• grid-template-columns: Define las columnas de la cuadrícula
• grid-template-rows: Define las filas de la cuadrícula
• grid-gap o gap: Espacio entre elementos
• grid-template-areas: Define áreas con nombre en la cuadrícula
• justify-items, align-items: Alinean elementos dentro de sus celdas

Ejemplo práctico:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px solid #999;
}

.grid-item {
  background-color: #9b59b6;
  color: white;
  padding: 30px;
  text-align: center;
  font-size: 24px;
}

display: table y relacionados

Estos valores permiten que elementos HTML se comporten como elementos de tabla.

.table-container {
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

Valores relacionados:

• table-row-group: Comportamiento como <tbody>
• table-header-group: Comportamiento como <thead>
• table-footer-group: Comportamiento como <tfoot>
• table-column: Comportamiento como <col>
• table-column-group: Comportamiento como <colgroup>
• table-caption: Comportamiento como <caption>

Ejemplo práctico:

<div class="table-container">
  <div class="table-row">
    <div class="table-cell">Celda 1</div>
    <div class="table-cell">Celda 2</div>
    <div class="table-cell">Celda 3</div>
  </div>
  <div class="table-row">
    <div class="table-cell">Celda 4</div>
    <div class="table-cell">Celda 5</div>
    <div class="table-cell">Celda 6</div>
  </div>
</div>

.table-container {
  display: table;
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
  padding: 10px;
  border: 1px solid #ddd;
  vertical-align: middle;
}

.table-row:nth-child(odd) {
  background-color: #f9f9f9;
}

Otros valores de display

display: contents

Hace que el elemento en sí desaparezca del árbol de renderizado, pero sus hijos permanecen.

.container {
  display: contents;
}

Ejemplo práctico:

<div class="flex-container">
  <div class="wrapper display-contents">
    <div class="item">1</div>
    <div class="item">2</div>
  </div>
  <div class="item">3</div>
</div>

.flex-container {
  display: flex;
  gap: 10px;
}

.wrapper {
  border: 2px dashed red;
  padding: 10px;
}

.display-contents {
  display: contents;
}

.item {
  background-color: #3498db;
  color: white;
  padding: 20px;
}

display: flow-root

Crea un nuevo contexto de formato de bloque, útil para contener elementos flotantes.

.container {
  display: flow-root;
}

Ejemplo práctico:

<div class="container">
  <div class="float-left">Elemento flotante</div>
  <p>Texto que fluye alrededor del elemento flotante...</p>
</div>

.container {
  display: flow-root;
  border: 1px solid #999;
  padding: 10px;
  margin: 20px 0;
}

.float-left {
  float: left;
  width: 150px;
  height: 150px;
  margin-right: 10px;
  background-color: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

Casos de uso comunes

Creación de menús de navegación

<nav class="main-nav">
  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Productos</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Contacto</a></li>
  </ul>
</nav>

.main-nav ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-nav li {
  margin-right: 20px;
}

.main-nav a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
  transition: background-color 0.3s;
}

.main-nav a:hover {
  background-color: #f0f0f0;
}

@media (max-width: 768px) {
  .main-nav ul {
    flex-direction: column;
  }
  
  .main-nav li {
    margin-right: 0;
    margin-bottom: 5px;
  }
}

Diseño de tarjetas

<div class="card-grid">
  <div class="card">
    <img src="imagen1.jpg" alt="Imagen 1">
    <div class="card-content">
      <h3>Título 1</h3>
      <p>Descripción breve del contenido de esta tarjeta.</p>
      <button>Leer más</button>
    </div>
  </div>
  <!-- Más tarjetas aquí -->
</div>

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

.card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card-content {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.card-content h3 {
  margin-top: 0;
}

.card-content button {
  margin-top: auto;
  align-self: flex-start;
  padding: 8px 16px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

Diseño de formularios

<form class="contact-form">
  <div class="form-group">
    <label for="name">Nombre</label>
    <input type="text" id="name" name="name" required>
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>
  </div>
  <div class="form-group">
    <label for="message">Mensaje</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </div>
  <button type="submit">Enviar</button>
</form>

.contact-form {
  display: grid;
  grid-gap: 20px;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input,
.form-group textarea {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

button[type="submit"] {
  padding: 12px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  justify-self: start;
}

Consideraciones de rendimiento

Cambios de display y reflow

Cambiar la propiedad display de un elemento puede provocar un reflow (recalculación del layout) en la página, lo que puede afectar al rendimiento si se hace con frecuencia.

Mejores prácticas:

• Evita cambiar display durante animaciones
• Usa transform y opacity para animaciones cuando sea posible
• Considera usar visibility en lugar de alternar entre display: none y otro valor

Uso de display: none vs visibility: hidden

/* Opción 1: Ocultar con display: none */
.hidden {
  display: none;
}

/* Opción 2: Ocultar con visibility: hidden */
.invisible {
  visibility: hidden;
}

Consideraciones:

• display: none elimina completamente el elemento del flujo del documento
• visibility: hidden mantiene el espacio del elemento pero lo hace invisible
• display: none puede causar más reflow cuando se alterna
• Los elementos con visibility: hidden siguen ocupando espacio y pueden recibir eventos de foco

Compatibilidad con navegadores

La mayoría de los valores básicos de display tienen buen soporte en todos los navegadores modernos. Sin embargo, algunos valores más nuevos pueden tener soporte limitado:

• display: flex y display: grid tienen buen soporte en navegadores modernos, pero pueden requerir prefijos o alternativas para navegadores más antiguos
• display: contents tiene problemas de accesibilidad en algunos navegadores
• display: flow-root es relativamente nuevo y puede no funcionar en navegadores antiguos

Enfoque progresivo:

/* Enfoque básico para todos los navegadores */
.container {
  display: block;
}

/* Mejora para navegadores modernos */
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

Conclusión

La propiedad display es fundamental para controlar cómo se muestran y comportan los elementos en una página web. Desde los valores básicos como block e inline hasta los sistemas de layout más avanzados como flex y grid, dominar esta propiedad te permite crear diseños web flexibles, responsivos y visualmente atractivos.

Al elegir el valor de display adecuado para cada situación, puedes optimizar tanto la estructura visual como el rendimiento de tu sitio web. Recuerda considerar las necesidades específicas de tu diseño, la compatibilidad con navegadores y las implicaciones de accesibilidad al trabajar con esta versátil propiedad CSS.