Mit vezérel a display tulajdonság?

Question

Accepted Answer

A `display` az egyik legalapvetőbb CSS tulajdonság — azt vezérli, **hogy egy elem hogyan generál dobozokat** és hogy gyermekei hogyan lesznek elrendezve.

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

## Külső vs belső display

A `display` valójában két dolgot állít be: hogy a doboz **kívülről** (block/inline) és hogy hogyan rendezi el a **gyermekeit** belülről (flow/flex/grid). A `display: flex` azt jelenti, hogy "ez a doboz blokk szintű, és gyermekei flex elemek".

## display: none vs visibility: hidden

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

Fontosabb megkülönböztetés: a `display: none` összecsukja az elrendezést (és elrejti a képernyőolvasók elől); a `visibility: hidden` hagyott egy részt az elem helyén. Használj `display: none` értéket az igazi eltávolításhoz, `visibility: hidden` értéket az elrejtéshez az elrendezés megőrzésével.

## Az elrendezés munkalovai

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

A modern elrendezés szinte teljes egészében a `flex` (1D — sorok vagy oszlopok) és a `grid` (2D — sorok és oszlopok együtt) alapján épül fel.

## Miért fontos

A `display` egy elem teljes elrendezési viselkedését határozza meg.

A blokk vs inline vs inline-block ismerete magyarázza az alapértelmezett folyamot; a `flex`/`grid` a modern elrendezés magja; és a `none` vs `visibility` megkülönböztetés egy gyakran tesztelt, gyakorlatilag fontos részlet.