Što svojstvo display kontrolira?

Question

Accepted Answer

`display` je jedno od najfundamentalnijih CSS svojstava — kontrolira **kako element genira kutiju** i kako se njegovi djeca raspoređuju.

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

## Vanjski nasuprot unutrašnjem prikazu

`display` zapravo postavlja dvije stvari: kako se kutija ponaša **izvana** (block/inline) i kako raspoređuje svoje **dijete** iznutra (flow/flex/grid). `display: flex` znači "ova kutija je block-level, a njezina djeca su flex stavke."

## display: none nasuprot visibility: hidden

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

Klučna razlika: `display: none` kolabira raspored (i skriva od čitača zaslona); `visibility: hidden` ostavlja prazninu gdje je element bio. Koristite `display: none` da stvarno uklonite, `visibility: hidden` da sakrijete dok čuvate raspored.

## Radnici rasporeda

```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 raspored je izgrađen gotovo u potpunosti na `flex` (1D — redovi ili stupci) i `grid` (2D — redovi i stupci zajedno).

## Zašto je važno

`display` određuje cijelo ponašanje rasporeda elementa.

Znanje block nasuprot inline nasuprot inline-block objašnjava zadanu tečnost; `flex`/`grid` su jezgra modernog rasporeda; a razlika `none` nasuprot `visibility` je često testirani, praktično važan detalj.