Что такое inline-block в CSS?

inline-block — это значение свойства display в CSS, которое позволяет элементам вести себя как строчные элементы (занимать только необходимую ширину и не начинать с новой строки), но при этом иметь возможность задавать ширину, высоту, отступы (margin, padding) с любой стороны, как у блочных элементов.

Основные характеристики:

• Размещение "в строку": Элементы с display: inline-block располагаются друг за другом в одной строке, если для этого хватает места.
• Учет размеров: Можно задавать width и height. Content определяет размер по умолчанию, если они не заданы.
• Полные отступы и рамки: Применяются margin, padding и border со всех сторон (top, right, bottom, left), в отличие от строчных элементов (inline), где вертикальные отступы и рамки не влияют на расположение соседних элементов.
• Выравнивание по вертикали: Можно использовать свойство vertical-align для выравнивания относительно соседних элементов в строке.

Пример использования:

/* Элементы будут располагаться в строку, иметь заданные размеры и отступы */
.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 1px solid black;
}

Сфера применения:

• Создание горизонтальных навигационных меню.
• Расположение блоков контента в виде карточек в одной строке.
• Комбинирование и выравнивание элементов, которые должны быть рядом, но иметь определенные размеры.

Сравнение с другими display-значениями: