Quelle est la différence entre la propriété display: block et la propriété display: inline?

Les éléments avec display: block occupent toute la largeur disponible, commencent sur une nouvelle ligne et s'empilent verticalement. On peut définir width, height, margin (tous les côtés) et padding (tous les côtés).

Les éléments avec display: inline occupent exactement l'espace nécessaire à leur contenu, sont dans le flux de texte et s'alignent horizontalement. Il n'est pas possible de définir width et height. Horizontalement, on peut définir margin et padding, verticalement seulement padding. margin-top et margin-bottom ne s'appliquent pas.

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

/* Exemple display: inline */
span {
  display: inline;
  /* width et height ne s'appliquent pas */
  margin: 10px; /* margin-top et margin-bottom sont ignorés */
  padding: 5px;
  background-color: lightgreen;
}