Care este diferența dintre proprietatea display: block și proprietatea display: inline?

Elementele cu display: block ocupă întreaga lățime disponibilă, încep pe o linie nouă și se așază vertical. Se pot seta width, height, margin (toate părțile) și padding (toate părțile).

Elementele cu display: inline ocupă exact spațiul de care are nevoie conținutul lor, se află în fluxul de text și se aliniază orizontal. Nu se pot seta width și height. Orizontal, se pot seta margin și padding, iar vertical doar padding. margin-top și margin-bottom nu se aplică.

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

/* Exemplu display: inline */
span {
  display: inline;
  /* width și height nu se aplică */
  margin: 10px; /* margin-top și margin-bottom sunt ignorate */
  padding: 5px;
  background-color: lightgreen;
}