CSS - Display Egenskapen

Egenskapen display er en av de viktigste i CSS. Den styrer hvordan et element oppfører seg i layouten: om det tar opp en hel linje, bare plassen til innholdet, eller om det kanskje forsvinner helt.

De vanligste display-verdiene

block: Elementet starter på en ny linje og tar opp hele bredden (f.eks. <div>, <p>).
inline: Elementet starter ikke på en ny linje, og tar bare den plassen det trenger (f.eks. <span>, <a>). Du kan ikke sette bredde eller høyde på et inline-element.
inline-block: En blanding! Det plasseres på linje med tekst, men du kan sette bredde og høyde på det.
none: Skjuler elementet helt. Elementet tar ikke opp noe plass lenger, som om det aldri eksisterte.

Interaktivt Eksempel

Velg en display-verdi for de lilla boksene under, og se hvordan det påvirker layouten:

block inline inline-block none

Dette er litt tekst før elementene.

Boks 1

Boks 2

Boks 3

Og dette er tekst etter elementene.

.test-element {
   display: block;
   background: purple;
   width: 100px; /* Ignoreres hvis 'inline' */
   height: 50px; /* Ignoreres hvis 'inline' */
 }