display er en av de mest grunnleggende CSS-egenskapene — den kontrollerer hvordan et element genererer en boks og hvordan dets underordnede elementer blir lagt ut.
{ : block; }
{ : inline; }
{ : inline-block; }
{ : none; }
{ : flex; }
{ : grid; }
display setter faktisk to ting: hvordan boksen oppfører seg utenfor (block/inline) og hvordan den legger ut sine underordnede elementer innvendig (flow/flex/grid). display: flex betyr "denne boksen er på bloknivå, og dens underordnede elementer er flex-elementer."
.gone { display: none; } /* removed from layout — takes NO space */
.hidden { visibility: hidden; } /* invisible but STILL occupies its space */
En viktig distinksjon: display: none kollapser layouten (og skjuler fra skjermlesere); visibility: hidden etterlater et gap hvor elementet var. Bruk display: none for å virkelig fjerne, visibility: hidden for å skjule mens du bevarer layouten.
.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 er bygget nesten helt på flex (1D — rader eller kolonner) og grid (2D — rader og kolonner sammen).
display bestemmer et elements hele layoutoppførsel.
Å kjenne til block vs inline vs inline-block forklarer standardflyten; flex/grid er kjernen i moderne layout; og skillet mellom none og visibility er en hyppig testet, praktisk viktig detalj.