Vad styr display-egenskapen?

Question

IT Interview Practice · Accepted Answer

`display` är en av de mest grundläggande CSS-egenskaperna — den styr **hur ett element genererar en låda** och hur dess barn läggs ut.

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

## Yttre vs inre display

`display` anger faktiskt två saker: hur lådan beter sig **utanför** (block/inline) och hur den organiserar sina **barn** inuti (flow/flex/grid). `display: flex` betyder "denna låda är på blocknivå, och dess barn är flex-objekt."

## display: none vs visibility: hidden

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

En viktig skillnad: `display: none` kollapsar layouten (och döljer från skärmläsare); `visibility: hidden` lämnar ett gap där elementet var. Använd `display: none` för att verkligen ta bort, `visibility: hidden` för att dölja medan du bevarar layouten.

## Layoutens arbetshästar

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

Modern layout är byggd nästan helt på `flex` (1D — rader eller kolumner) och `grid` (2D — rader och kolumner tillsammans).

## Varför det spelar roll

`display` avgör ett elements hela layoutbeteende.

Att veta skillnaden mellan block, inline och inline-block förklarar standardflödet; `flex`/`grid` är kärnan i modern layout; och skillnaden mellan `none` och `visibility` är en ofta testerad, praktiskt viktig detalj.

Yttre vs inre display

display: none vs visibility: hidden

Layoutens arbetshästar

Varför det spelar roll

Relaterade frågor