Откуда берется горизонтальный отступ у пустых inline-blocks?

Question

[frontendo]

https://jsfiddle.net/twvL7n24/1/

задачка для адептов верстки. подскажите, почему есть отступ между верхними инлайн-блоками и нижним инлайн-блоком? если в него поместить контент, то получится, что отступа нет. Но без контента он хоть и имеет высоту 0, но почему то как бы резервирует место под содержимое

Answer 1

[iBird Rose]

vertical-align выравнивает по середине

Comments

[frontendo]

нет, не помогает

[iBird Rose]

frontendo: че не помогает? поставь vertical-align:top; для своих inline-block.

[frontendo]

iBird Rose: тогда ситуация выглядит так joxi.ru/Dr8O3JES9q7qA6 отступ переместился вниз

[iBird Rose]

frontendo: а это уже невидимые пробелы в inline-block. как лечить - способов куча в гугле. один из них font-size: 0 родителю https://jsfiddle.net/twvL7n24/3/

[frontendo]

iBird Rose: спасибо. теперь все работает