В чём разница между display:inline и display:inline-block?

display: inline и display: inline-block оба располагают элементы в строку, но между ними есть ключевые отличия:

• inline: элемент ведёт себя как текстовый символ, не задаёт ширину и высоту, нельзя задать отступы сверху и снизу, а также вертикальные margin и padding не влияют на поток.
• inline-block: элемент располагается в строке, но при этом можно задавать ширину, высоту, вертикальные отступы и паддинги, как у блочных элементов.

Пример:

span.inline {
  display: inline;
  width: 100px; /* не сработает */
  height: 50px; /* не сработает */
  background: lightblue;
}

span.inline-block {
  display: inline-block;
  width: 100px; /* сработает */
  height: 50px; /* сработает */
  background: lightgreen;
}

Таким образом, inline-block удобен, когда нужно, чтобы элемент был в строке, но при этом имел размеры и отступы.