Что такое inline-block элемент

Inline-block элементы сочетают свойства строчных и блочных элементов. Они располагаются в строке (как inline), но могут иметь ширину, высоту, отступы и поля (как block).

Особенности:

• Не переносятся на новую строку автоматически.
• Подчиняются вертикальному выравниванию через vertical-align.
• Могут содержать другие элементы.

Пример:

.button {
  display: inline-block;
  width: 120px;
  height: 40px;
  padding: 10px;
}

Нюансы:

• Между inline-block элементами могут появляться пробелы (из-за переносов в HTML).
• Для устранения пробелов можно использовать font-size: 0 у родителя или убрать переносы в HTML.

Часто используется для горизонтальных меню, кнопок и других элементов, требующих строчного расположения с контролем размеров.