X'inhu l-proprijetà display li tikkontolla?

Question

Accepted Answer

`display` hija waħda mill-aktar proprijetajiet CSS fundamentali — tikkontolla **kif element jiġġenera box** u **kif l-ittfal tiegħu huma maqsuma**.

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

## Barra vs ġewwa display

`display` fil-fatt tisettja żewġ affarijiet: kif il-box tippeċċa **barra** (block/inline) u kif hija taqsam l-**ittfal** **ġewwa** (flow/flex/grid). `display: flex` ifisser "din il-box hija block-level, u l-ittfal tagħha huma 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 */
```

Distinzjoni importanti: `display: none` iħoll il-layout (u taħbi minn screen readers); `visibility: hidden` ħalli spazju fejn kien l-element. Uża `display: none` biex tneħħi verament, `visibility: hidden` biex taħbi filwaqt li tprezz il-layout.

## Is-servanti tal-layout

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

Il-layout modern huwa mibni almost interament fuq `flex` (1D — ringieli jew kolonni) u `grid` (2D — ringieli u kolonni flimkien).

## Għaliex dan huwa importanti

`display` jiddetermina l-imġieba tal-layout sħiħa tal-element.

Il-għarfien ta' block vs inline vs inline-block jispjega l-flow default; `flex`/`grid` huma l-qalb tal-layout modern; u d-distinzjoni `none` vs `visibility` hija dettall li ħafna drabi tiġi ttestata u pratikament importanti.