Чем отличается свойство display: block от свойства display: inline?

Элементы с display: block занимают всю доступную ширину, начинают с новой строки и выстраиваются вертикально. Можно задавать width, height, margin (все стороны) и padding (все стороны).

Элементы с display: inline занимают ровно столько места, сколько нужно их содержимому, находятся в потоке текста и выстраиваются горизонтально. Нельзя задавать width и height. По горизонтали можно задавать margin и padding, по вертикали — только padding. margin-top и margin-bottom не применяются.

/* Пример display: block */
div {
  display: block;
  width: 100px;
  height: 50px;
  margin: 10px;
  padding: 5px;
  background-color: lightblue;
}

/* Пример display: inline */
span {
  display: inline;
  /* width и height не применимы */
  margin: 10px; /* margin-top и margin-bottom игнорируются */
  padding: 5px;
  background-color: lightgreen;
}