¿Qué controla la propiedad display?

Question

Accepted Answer

`display` es una de las propiedades CSS más fundamentales — controla **cómo un elemento genera una caja** y cómo se distribuyen sus elementos secundarios.

```css
.a { display: block; }        /* full width, starts new line (div, p, section) */
.b { display: inline; }       /* flows in text, ignores width/height (span, a) */
.c { display: inline-block; } /* flows inline BUT respects width/height/margins */
.d { display: none; }         /* removed entirely — no space, not rendered */
.e { display: flex; }         /* flex container — 1D layout for children */
.f { display: grid; }         /* grid container — 2D layout for children */
```

## Display externo vs interno

`display` en realidad establece dos cosas: cómo se comporta la caja **externamente** (block/inline) y cómo distribuye sus **elementos secundarios** internamente (flow/flex/grid). `display: flex` significa "esta caja es de nivel de bloque, y sus elementos secundarios son elementos flex."

## display: none vs visibility: hidden

```css
.gone   { display: none; }        /* removed from layout — takes NO space */
.hidden { visibility: hidden; }    /* invisible but STILL occupies its space */
```

Una distinción clave: `display: none` colapsa el diseño (y lo oculta de los lectores de pantalla); `visibility: hidden` deja un espacio donde estaba el elemento. Use `display: none` para eliminar realmente, `visibility: hidden` para ocultarse manteniendo el diseño.

## Los caballos de tiro del diseño

```css
.container {
  display: flex;          /* lay children in a row/column (one dimension) */
  gap: 1rem;
}
.grid {
  display: grid;          /* lay children in rows AND columns (two dimensions) */
  grid-template-columns: repeat(3, 1fr);
}
```

El diseño moderno se construye casi enteramente en `flex` (1D — filas o columnas) y `grid` (2D — filas y columnas juntas).

## Por qué es importante

`display` determina el comportamiento del diseño completo de un elemento.

Conocer block vs inline vs inline-block explica el flujo predeterminado; `flex`/`grid` son el núcleo del diseño moderno; y la distinción entre `none` y `visibility` es un detalle que se prueba frecuentemente y es prácticamente importante.