Почему появляется отступ между двумя блоками?

Question

[ApachEsH]

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

Ссылка на код

Comments

[Матвей Мамонов]

Не уверен, но, вроде бы, пробел (перенос строки) в коде добавляет реальный пробел между двумя inline-* элементами

Answer 1

[Анатолий]

Это проблема inline-block.
Решений несколько (можно почитать по ссылке выше), лично я просто вставляю комментарии или убираю Enter.

Comments

[ApachEsH]

Спасибо огромное)

[ой всё]

похожий баг был в старых версиях firefox с тэгами LI

Answer 2

[ApachEsH]

А как избавиться тогда от вертикального отступа? Когда делаешь больше 4х блоков, то четвертый как и задумывалась прыгает на следующую строку. Но вот вертикальный отступ остается

Comments

[Анатолий]

Вам повезло, что я еще раз зашел сюда. Лучше писать в комментарии.
Жду код.

[ApachEsH]

Анатолий, Буду знать)

[ApachEsH]

Анатолий, Да код тот же, просто вставьте тот же блок больше 3х раз. Там будет вертикальный отсуп

[ApachEsH]

Анатолий, https://jsfiddle.net/ApachEsH/7nLL0ora/

[Анатолий]

ApachEsH, Как вариант.

[ApachEsH]

Анатолий, То, что нужно. Спасибо за помощь

[cssfish]

ApachEsH, да просто vertical-align:top; добавьте к inline-block

[ApachEsH]

cssfish, тоже работает. Спасибо)

[Андрей]

Отличный совет, контейнеру флекс задать и свести на нет смысл использования inline-block. Типа спрашивают как мне отверткой закрутить болт, а в ответ: «да вот тут молотком ебни и норм»
Я бы тому же контейнеру задал font-size: 0; это решит проблему и горизонтальных отступов (вместо этих комментариев в разметке) и вертикальных, а самому блоку затем при надобности задать тот размер шрифта который нужен.
https://jsfiddle.net/791asy84/