Кому нужно задать display inline-block, чтобы inner div встали в строку

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

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

Как отвечать

Правильный ответ: display: inline-block задают внутренним div, а не родителю. Каждый такой элемент снаружи ведёт себя как строчный и встаёт в строку родителя, а внутри остаётся блоком, которому можно задать width, height и вертикальные отступы. В записи из двух ключевых слов (CSS Display Level 3) это display: inline flow-root.

Если поставить inline-block родителю, он сожмётся по ширине содержимого, но его дочерние div так и останутся блочными и будут стоять друг под другом.

Дальше назовите три особенности, которые всплывают сразу:

• зазор между элементами: переносы строк и пробелы в HTML между тегами превращаются в обычный пробел текущего шрифта, примерно четверть em. Убирают его, удаляя пробелы в разметке или ставя родителю font-size: 0 с возвратом размера детям;
• вертикальное выравнивание: по умолчанию vertical-align: baseline, поэтому блоки разной высоты встают по базовой линии текста, а снизу появляется щель. Лечится vertical-align: top;
• перенос: если сумма ширин с учётом зазоров больше родителя, последний блок уходит на новую строку. Классика: три блока по 33.33% плюс пробелы. Запретить перенос можно через white-space: nowrap на родителе.

Завершите современным вариантом: display: flex на родителе и gap для отступов. Здесь свойство уже ставится родителю, потому что flex описывает, как контейнер раскладывает детей. Этот способ снимает все три проблемы.

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

Ставят inline-block родителю, как советуют некоторые шпаргалки. Это самая частая ошибка именно на этом вопросе.

Используют font-size: 0 и забывают, что дети с размерами в em теперь считают их от нуля. Размер детям нужно задавать в rem или явно.

Не знают про vertical-align и подгоняют высоту блоков через margin, получая раскладку, которая ломается от первой строки текста другой длины.