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

Разница между display: block и display: inline-block заключается в следующем:

1. display: block — элемент отображается как блок и занимает всю доступную ширину. 1 Новый блок начинается с новой строки. 1
2. display: inline-block — элемент отображается как строчный элемент, но его содержимое может быть отформатировано как блок. 1 Элемент занимает столько места, сколько ему нужно для отображения содержимого, но может иметь ширину и высоту. 1

Таким образом, display: block создаёт элемент уровня блока, который занимает всё горизонтальное пространство и располагается один над другим вертикально. 35 Display: inline-block создаёт элемент, который продолжает находиться в строке, но при этом может иметь важные свойства блока: элемент всегда прямоугольный, работают свойства width и height. 5

Это значение display используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров. 5