Почему блоки не помещаются на линии?

Question

[Михаил]

codepen.io/anon/pen/mWyNZr
Почему красный и чёрный блок не лежат на одной линии, если у них стоит свойство display: inline-block?

Answer 1

[iBird Rose]

гугли как фиксить отступы у inline-block
вот пример с font-size: 0 codepen.io/anon/pen/qrEeeB

Comments

[Сергей delphinpro]

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

Answer 2

[Дмитрий Христоев]

потому что перенос строки - это пробел codepen.io/haoss/pen/wJaBYd

Answer 3

[Вероника]

Потому что элементы inline-block воспринимаютcя почти как слова в строке, у них есть свои отступы, как и у любого текста.
Это решается стандартным приемом: обнуляешь шрифт в контейнере, а дочерним элементам прописываешь размер шрифта (тк шрифт - наследуемое свойство).

А еще лучше - воспользуйся флоатами.