Was kontrolliert die display-Eigenschaft?

Question

Accepted Answer

`display` ist eine der grundlegendsten CSS-Eigenschaften — sie kontrolliert **wie ein Element eine Box erzeugt** und wie seine Kinder angeordnet werden.

```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 */
```

## Äußere vs innere Display

`display` setzt tatsächlich zwei Dinge: wie sich die Box **von außen** verhält (block/inline) und wie sie ihre **Kinder** von innen anordnet (flow/flex/grid). `display: flex` bedeutet "diese Box ist auf Block-Ebene, und ihre Kinder sind Flex-Elemente."

## display: none vs visibility: hidden

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

Ein wichtiger Unterschied: `display: none` bricht das Layout zusammen (und versteckt es vor Screen Readern); `visibility: hidden` hinterlässt eine Lücke, wo sich das Element befand. Verwenden Sie `display: none` zum vollständigen Entfernen, `visibility: hidden` zum Verstecken unter Beibehaltung des Layouts.

## Die Layout-Workhorses

```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);
}
```

Modernes Layout basiert fast vollständig auf `flex` (1D — Zeilen oder Spalten) und `grid` (2D — Zeilen und Spalten zusammen).

## Warum es wichtig ist

`display` bestimmt das gesamte Layoutverhalten eines Elements.

Das Wissen über block vs inline vs inline-block erklärt den standardmäßigen Flow; `flex`/`grid` sind der Kern des modernen Layouts; und der Unterschied zwischen `none` und `visibility` ist ein häufig abgefragtes, praktisch wichtiges Detail.