Wat regelt de display property?

Question

Accepted Answer

`display` is een van de meest fundamentele CSS-eigenschappen — het bepaalt **hoe een element een box genereert** en hoe de onderliggende elementen worden opgemaakt.

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

## Outer vs inner display

`display` stelt eigenlijk twee dingen in: hoe de box zich **van buitenaf** gedraagt (block/inline) en hoe deze zijn **kindelementen** van binnenin opgemaakt (flow/flex/grid). `display: flex` betekent "deze box is blokniveau, en de kindelementen zijn flex-items."

## display: none vs visibility: hidden

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

Een belangrijk onderscheid: `display: none` verklapt de layout (en verbergt voor schermlezers); `visibility: hidden` laat een gat achter waar het element was. Gebruik `display: none` om echt te verwijderen, `visibility: hidden` om te verbergen terwijl de layout behouden blijft.

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

Moderne layout is vrijwel geheel gebouwd op `flex` (1D — rijen of kolommen) en `grid` (2D — rijen en kolommen samen).

## Waarom het belangrijk is

`display` bepaalt het volledige lay-outgedrag van een element.

Kennis van block versus inline versus inline-block verklaart de standaardstroom; `flex`/`grid` zijn de kern van moderne layout; en het verschil tussen `none` en `visibility` is een veelgetoetst, praktisch belangrijk detail.