Qual é a diferença entre a propriedade display: block e a propriedade display: inline?

Os elementos com display: block ocupam toda a largura disponível, começam numa nova linha e alinham-se verticalmente. Pode definir width, height, margin (todos os lados) e padding (todos os lados).

Os elementos com display: inline ocupam exatamente o espaço necessário ao seu conteúdo, estão no fluxo de texto e alinham-se horizontalmente. Não é possível definir width e height. Horizontalmente, pode definir margin e padding, e verticalmente apenas padding. margin-top e margin-bottom não se aplicam.

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

/* Exemplo display: inline */
span {
  display: inline;
  /* width e height não se aplicam */
  margin: 10px; /* margin-top e margin-bottom são ignorados */
  padding: 5px;
  background-color: lightgreen;
}