Hvad styrer egenskaben display?

Question

Accepted Answer

`display` er en af de mest grundlæggende CSS-egenskaber — den styrer **hvordan et element genererer en boks** og hvordan dets børn er udformet.

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

## Ydre vs indre display

`display` sætter faktisk to ting: hvordan boksen opfører sig **udadtil** (block/inline) og hvordan den udformer sine **børn** indenfor (flow/flex/grid). `display: flex` betyder "denne boks er på blokniveau, og dens børn er flex-elementer."

## display: none vs visibility: hidden

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

En vigtig forskel: `display: none` kollapser layoutet (og skjuler fra skærmlæsere); `visibility: hidden` efterlader et hul, hvor elementet var. Brug `display: none` til helt at fjerne, `visibility: hidden` til at skjule mens layoutet bevares.

## Layout-arbejdsheste

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

Modernt layout er bygget næsten helt på `flex` (1D — rækker eller søjler) og `grid` (2D — rækker og søjler sammen).

## Hvorfor det betyder noget

`display` bestemmer et elements samlede layoutadfærd.

Viden om block vs inline vs inline-block forklarer standardflow; `flex`/`grid` er kernen i modernt layout; og skelnen mellem `none` og `visibility` er en hyppigt testede, praktisk vigtig detalje.