Что такое 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 для выравнивания относительно соседних элементов в строке.

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

css

С