¿En qué se diferencia la propiedad display: block de la propiedad display: inline?

Los elementos con display: block ocupan todo el ancho disponible, comienzan en una nueva línea y se apilan verticalmente. Se puede definir width, height, margin (todos los lados) y padding (todos los lados).

Los elementos con display: inline ocupan exactamente el espacio que necesita su contenido, están en flujo de texto y se alinean horizontalmente. No se puede definir width y height. En horizontal, se puede definir margin y padding, y en vertical solo padding. margin-top y margin-bottom no se aplican.

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

/* Ejemplo display: inline */
span {
  display: inline;
  /* width y height no aplican */
  margin: 10px; /* margin-top y margin-bottom se ignoran */
  padding: 5px;
  background-color: lightgreen;
}