Почему сдвигается макет в 3 колонки, сделанный inline-block способом?

Question

[Михаил Оловянников]

Всем привет. Я тренируюсь делать макеты разными способами и столкнулся с проблемой. При добавлении текста в макет, сделанный способом через Inline-block'и там все плывет. Про пробелы между тегами знаю, но разобраться все равно не смог. Объясните пожалуйста в чем дело. Вот ссылка на пример: https://study-projects.netlify.app/3cdw/

Comments

[Сергей delphinpro]

макеты (раскладки, сетки) делаются флексами или гридами. остальное не имеет смысла пробовать.

[Михаил Оловянников]

Сергей delphinpro, это я к собеседованиям готовлюсь будущим. Понимаю, что в наше время только гурман будет делать макет инлайн блоками.)

[Александр Васильев]

Есть еще display:table -> table-cell

Answer 1

[MaxonTox]

Тебе нужно переопределить фонт сайз и добавить дочерним блокам (inline-block`ам) вертикал элайн

.in-blocks {
  vertical-align: top;
  font-size: 20px;
}

Comments

[Михаил Оловянников]

Благодарю, заработало. А не можете, если не лень, объяснить механику этого выпадения - почему оно выпало? Стандартное вертикальное позиционирование (по умолчанию) инлайн элементов какое-то другое?