В чем разница между inline, inline-block и block элементами в CSS

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

Понимаете ли вы, как каждый ведёт себя в потоке и какие свойства к нему применимы.

Как отвечать

• block: занимает всю доступную ширину, начинается с новой строки. Ширина, высота, все отступы работают. Примеры: div, p, заголовки;
• inline: течёт внутри строки вместе с текстом, ширина по содержимому. Ширина и высота не применяются, вертикальные отступы и поля визуально не раздвигают строку (хотя фон растягивается), горизонтальные работают. Примеры: span, a, em;
• inline-block: снаружи ведёт себя как строчный (встаёт в строку рядом с соседями), внутри как блочный (принимает ширину, высоту и все отступы).

Практические следствия, которые и спрашивают:

• почему у span не работает высота: он строчный, высоту задаёт строка. Нужна высота, значит inline-block или flex;
• загадочный отступ между inline-block элементами: это пробел в разметке между тегами, он значим в строчном контексте. Лечится удалением пробелов, отрицательным полем или переходом на flex или grid;
• вертикальное выравнивание строчных элементов управляется vertical-align, а не align-items;
• display: none против visibility: hidden: первый убирает из потока, второй оставляет место.

Полезно добавить, что сегодня раскладку почти не делают на inline-block: его вытеснили flex и grid, где нет ни проблемы с пробелами, ни ручного выравнивания.

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

Задают высоту строчному элементу и не понимают, почему ничего не изменилось.

Ищут причину лишнего отступа в CSS, хотя дело в переносе строки в разметке.

Считают, что вертикальные поля у строчного элемента вообще ничего не делают: фон и границы они смещают, просто не двигают соседей.

Собирают сетку на inline-block вместо flex.