Wat is het verschil tussen de eigenschap display: block en display: inline?

Elementen met display: block nemen de volledige beschikbare breedte in, beginnen op een nieuwe regel en worden verticaal gestapeld. Je kunt width, height, margin (alle zijden) en padding (alle zijden) instellen.

Elementen met display: inline nemen precies de ruimte in die hun inhoud nodig heeft, bevinden zich in de tekststroom en worden horizontaal uitgelijnd. width en height kunnen niet worden ingesteld. Horizontaal kunnen margin en padding worden ingesteld, verticaal alleen padding. margin-top en margin-bottom worden niet toegepast.

/* Voorbeeld display: block */
div {
  display: block;
  width: 100px;
  height: 50px;
  margin: 10px;
  padding: 5px;
  background-color: lightblue;
}

/* Voorbeeld display: inline */
span {
  display: inline;
  /* width en height worden niet toegepast */
  margin: 10px; /* margin-top en margin-bottom worden genegeerd */
  padding: 5px;
  background-color: lightgreen;
}