Wat is de belangrijkste betekenis van de eigenschap…

De eigenschap display bepaalt hoe een element wordt weergegeven in het document en hoe het interacteert met andere elementen, door deel te nemen aan de layout flow. Het definieert het type formatteringsblok van het element.

Belangrijkste waarden:

block: Het element wordt als een blok geformatteerd. Het neemt de volledige beschikbare breedte in, begint op een nieuwe regel en kan vaste afmetingen hebben (width, height).
inline: Het element wordt inline geformatteerd. Het begint geen nieuwe regel, neemt alleen de benodigde breedte in en kan geen vaste afmetingen hebben (width, height). Verticale marges (margin-top, margin-bottom) en interne padding (padding-top, padding-bottom) beïnvloeden de omliggende elementen niet.
inline-block: Het element wordt inline geformatteerd, maar gedraagt zich als een blok binnen de regel. Het begint geen nieuwe regel, kan vaste afmetingen hebben (width, height) en marges en padding die de omliggende elementen beïnvloeden.
none: Het element en de inhoud worden niet weergegeven. Het element wordt volledig uit de documentstroom verwijderd en neemt geen ruimte in.
flex: Het element wordt een Flex-container, en zijn directe nakomelingen worden Flex-elementen. Gebruikt voor het maken van flexibele lay-outs.
grid: Het element wordt een Grid-container. Gebruikt voor het maken van op raster gebaseerde lay-outs.

Hoe het werkt:

De browser gebruikt de waarde display om het type formatteringscontext te bepalen waarin het element zich bevindt. Dit beïnvloedt:

De documentstroom: Hoe het element zich positioneert ten opzichte van zijn buren.
De afmetingen van het element: De mogelijkheid om breedte en hoogte in te stellen en de invloed van de inhoud op de afmetingen.
De invloed op omliggende elementen: Hoe marges en afmetingen van het element de lay-out van andere elementen beïnvloeden.

Voorbeeld:

/* Element met display: block */
div {
  display: block;
  width: 100%; /* Neemt de volledige breedte in */
  margin-bottom: 10px; /* Creëert verticale ruimte */
}

/* Element met display: inline */
span {
  display: inline;
  /* width en height worden genegeerd */
  /* margin-top en margin-bottom worden genegeerd */
}

/* Element met display: inline-block */
img {
  display: inline-block;
  width: 100px; /* Breedte kan worden ingesteld */
  height: 100px; /* Hoogte kan worden ingesteld */
  margin: 5px; /* Creëert marges aan alle zijden */
}

/* Verborgen element */
.hidden {
  display: none;
}

Wat is de belangrijkste betekenis van de eigenschap display in CSS en hoe werkt het?