Ce controlează proprietatea display?

Question

Accepted Answer

`display` este una dintre cele mai fundamentale proprietăți CSS — ea controlează **cum generează un element o casetă** și cum sunt dispuși **elementele sale copil**.

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

## Display exterior vs interior

`display` stabilește de fapt două lucruri: cum se comportă caseta **în exterior** (block/inline) și cum dispune **elementele copil** **în interior** (flow/flex/grid). `display: flex` înseamnă "această casetă este la nivel de bloc, iar elementele sale copil sunt elemente flex."

## display: none vs visibility: hidden

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

O distincție esențială: `display: none` restrânge aspectul (și ascunde de cititorii de ecran); `visibility: hidden` lasă un gol în locul în care era elementul. Folosiți `display: none` pentru a elimina cu adevărat, `visibility: hidden` pentru a ascunde păstrând aspectul.

## Caii de muncă ai aspectului

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

Aspectul modern este construit aproape în întregime pe `flex` (1D — rânduri sau coloane) și `grid` (2D — rânduri și coloane împreună).

## De ce este important

`display` determină comportamentul complet al aspectului unui element.

A cunoaște block vs inline vs inline-block explică fluxul implicit; `flex`/`grid` sunt nucleul aspectului modern; iar distincția dintre `none` și `visibility` este un detaliu frecvent testat și practic important.