Sifa ya display inakamatia nini?

Question

Accepted Answer

`display` ni mojawapo ya sifa muhimu zaidi za CSS — inakamatia **jinsi element inavyozalisha sanduku** na jinsi watoto wake wanavyooleolewa.

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

## Onyesho la nje dhidi ya la ndani

`display` inakatika mambo mawili: jinsi sanduku linavyofanya kazi **nje** (block/inline) na jinsi inavyoolesha **watoto** wake ndani (flow/flex/grid). `display: flex` inamaanisha "sanduku hili liko katika kiwango cha block, na watoto wake ni vipengee vya 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 */
```

Faida muhimu: `display: none` inaangusha mpango (na inafisha kutokana na wasomaji wa skrini); `visibility: hidden` inawacha pengo mahali element ilikuwa. Tumia `display: none` ili kuondoa kweli, `visibility: hidden` ili kuficha wakati wa kuhifadhi mpango.

## Waajiri wa mpango

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

Mpango wa kisasa umejengwa karibu kabisa kwenye `flex` (1D — safu mlalo au safu wima) na `grid` (2D — safu mlalo na safu wima pamoja).

## Kwa nini hilo linastahili

`display` inakamatia tabia nzima ya mpango wa elementi.

Kujua tofauti kati ya block, inline na inline-block kunaelezea mtiririko wa chaguo-msingi; `flex`/`grid` ni mojawapo ya kiwango cha mpango wa kisasa; na tofauti kati ya `none` na `visibility` ni maelezo yanayojaribiwa mara kwa mara, muhimu katika mazoezi.