Какая особенность display inline-block в CSS, влияющая на установку фиксированной высоты и ширины?

Что проверяют

Знаете ли вы, чем inline-block отличается от inline в части размеров и какие побочные эффекты даёт то, что элемент остаётся в строке. Следом почти всегда спрашивают про щель между соседними блоками и про вертикальное выравнивание.

Как отвечать

Суть в двойной природе. Снаружи элемент ведёт себя как строчный: стоит в строке рядом с текстом и переносится вместе с ней. Внутри он как блок и создаёт свой блочный контекст форматирования. В современной двухзначной записи это display: inline flow-root.

• размеры работают: width и height применяются, у обычного inline они игнорируются. Исключение: замещаемые элементы вроде img и input принимают размеры и будучи строчными;
• вертикальные отступы работают: margin и padding сверху и снизу раздвигают строку, а у inline вертикальный padding рисуется поверх соседних строк, не сдвигая их;
• пробелы между тегами видны: перенос строки в HTML между двумя inline-block превращается в обычный пробел. Четыре блока по width: 25% из-за этого не помещаются в одну строку;
• выравнивание по базовой линии: по умолчанию vertical-align: baseline. Базовая линия блока берётся по последней строке текста внутри, поэтому блоки одинаковой высоты с разным количеством текста встают ступенькой, а под рядом остаётся зазор под выносные элементы шрифта;
• процентная высота: height: 50% сработает, только если у родителя высота задана явно.

Лечение: vertical-align: top или middle на самих элементах, для щели убрать пробелы в разметке или обнулить font-size у родителя. Но для раскладки рядов сегодня правильнее display: flex или grid с gap, где этих проблем нет.

Где спотыкаются

Говорят, что строчным элементам размер задать нельзя вообще, и забывают про img. Интервьюер обычно ловит именно на этом.

Ставят vertical-align на родителя и удивляются, что ничего не меняется. Свойство действует на сам строчный элемент.

Не учитывают box-sizing: при content-box по умолчанию padding и border добавляются к заданной ширине, и фиксированный блок оказывается шире расчётного.