Was ist der Unterschied zwischen der Eigenschaft display: block und display: inline?

Elemente mit display: block nehmen die gesamte verfügbare Breite ein, beginnen in einer neuen Zeile und werden vertikal gestapelt. Es können width, height, margin (alle Seiten) und padding (alle Seiten) festgelegt werden.

Elemente mit display: inline nehmen genau so viel Platz ein, wie ihr Inhalt benötigt, befinden sich im Textfluss und werden horizontal ausgerichtet. width und height können nicht festgelegt werden. Horizontal können margin und padding festgelegt werden, vertikal nur padding. margin-top und margin-bottom werden nicht angewendet.

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

/* Beispiel display: inline */
span {
  display: inline;
  /* width und height sind nicht anwendbar */
  margin: 10px; /* margin-top und margin-bottom werden ignoriert */
  padding: 5px;
  background-color: lightgreen;
}