¿Cuál es el significado principal de la propiedad display en CSS y cómo funciona?

La propiedad display determina cómo se mostrará un elemento en el documento y cómo interactuará con otros elementos, participando en el flujo de diseño (layout flow). Define el tipo de bloque de formato del elemento.

Valores principales:

• block: El elemento se formatea como un bloque. Ocupa todo el ancho disponible, comienza en una nueva línea, y puede tener dimensiones establecidas (width, height).
• inline: El elemento se formatea como en línea. No inicia una nueva línea, ocupa solo el ancho necesario, y no puede tener dimensiones establecidas (width, height), ni márgenes verticales (margin-top, margin-bottom) ni rellenos internos (padding-top, padding-bottom) que afecten a los elementos circundantes.
• inline-block: El elemento se formatea como en línea, pero se comporta como un bloque dentro de la línea. No inicia una nueva línea, puede tener dimensiones establecidas (width, height), así como márgenes verticales y rellenos internos que afectan a los elementos circundantes.
• none: El elemento y su contenido no se muestran. El elemento se elimina completamente del flujo del documento, sin ocupar espacio.
• flex: El elemento se convierte en un contenedor Flex, y sus descendientes directos en elementos Flex. Se usa para crear diseños flexibles.
• grid: El elemento se convierte en un contenedor Grid. Se usa para crear diseños basados en una cuadrícula.

Cómo funciona:

El navegador usa el valor display para determinar el tipo de contexto de formato en el que se encuentra el elemento. Esto afecta a:

• El flujo del documento: Cómo se posiciona el elemento respecto a sus vecinos.
• Las dimensiones del elemento: La capacidad de establecer ancho y alto, y cómo el contenido influye en las dimensiones.
• La influencia en los elementos circundantes: Cómo los márgenes y dimensiones del elemento afectan la disposición de otros elementos.

Ejemplo:

/* Elemento con display: block */
div {
  display: block;
  width: 100%; /* Ocupa todo el ancho */
  margin-bottom: 10px; /* Crea un margen vertical */
}

/* Elemento con display: inline */
span {
  display: inline;
  /* width y height se ignoran */
  /* margin-top y margin-bottom se ignoran */
}

/* Elemento con display: inline-block */
img {
  display: inline-block;
  width: 100px; /* Se puede establecer el ancho */
  height: 100px; /* Se puede establecer la altura */
  margin: 5px; /* Crea márgenes en todos los lados */
}

/* Elemento oculto */
.hidden {
  display: none;
}