Mitä display-ominaisuus ohjaa?

Question

Accepted Answer

`display` on yksi CSS:n perustavanlaatuisimmista ominaisuuksista — se ohjaa **kuinka elementti luo ruudun** ja kuinka sen lapset asettuvat.

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

## Ulkoinen vs sisäinen display

`display` asettaa itse asiassa kaksi asiaa: kuinka ruutu käyttäytyy **ulospäin** (block/inline) ja kuinka se asettaa **lapsensa** sisäpuolella (flow/flex/grid). `display: flex` tarkoittaa "tämä ruutu on lohkotason, ja sen lapset ovat flex-kohteita."

## display: none vs visibility: hidden

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

Olennainen ero: `display: none` romauttaa asettelun (ja piilottaa näytönlukijoilta); `visibility: hidden` jättää aukon, jossa elementti oli. Käytä `display: none` todelliseen poistamiseen, `visibility: hidden` piilottamiseen asettelun säilyttämisellä.

## Asettelun työhevoset

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

Moderni asettelu on rakennettu lähes kokonaan `flex`:n (1D — rivit tai sarakkeet) ja `grid`:n (2D — rivit ja sarakkeet yhdessä) varaan.

## Miksi se on tärkeää

`display` määrittää elementin koko asettelun käyttäytymisen.

block vs inline vs inline-block tuntemus selittää oletusvirran; `flex`/`grid` ovat modernin asettelun ydin; ja `none` ja `visibility` välinen ero on usein testattava, käytännössä tärkeä yksityiskohta.