Qual è la differenza tra la proprietà display: block e la proprietà display: inline?

Gli elementi con display: block occupano tutta la larghezza disponibile, iniziano su una nuova riga e si dispongono verticalmente. È possibile impostare width, height, margin (tutti i lati) e padding (tutti i lati).

Gli elementi con display: inline occupano esattamente lo spazio necessario al loro contenuto, sono nel flusso del testo e si allineano orizzontalmente. Non è possibile impostare width e height. Orizzontalmente, si può impostare margin e padding, verticalmente solo padding. margin-top e margin-bottom non si applicano.

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

/* Esempio display: inline */
span {
  display: inline;
  /* width e height non si applicano */
  margin: 10px; /* margin-top e margin-bottom vengono ignorati */
  padding: 5px;
  background-color: lightgreen;
}