Странное позиционирование блока DIV

[toliboff]

Внутри блока с фиксированной шириной и высотой должны располагаться четыре блока в один ряд. Между ними не должно быть пустое пространство. (margin:0; padding:0; не помогло). Почему блок с классом 'col-4-2' позиционируется относительно нижней границы текста блока с классом 'col-4-1'? Что я делаю неправильно.

Вот ссылка на файл: https://jsfiddle.net/ttoliboff/81oL39y3/

[klierik]

Потому что на расположение элементов со свойством "inline-bock;" влияет свойство "vertical-align", значение которого, по умолчанию, равно "baseline".

Если задать 

.col-4-1, .col-4-2 {
  vertical-align: top;
}

то блоки выровняются по верху.

[klierik]

https://jsfiddle.net/81oL39y3/1/

[Endorphin]

Для более подробного ответа: когда задаете блокам display:inline-block; то между блоками образуется некий отступ, этот отступ объясняется тем, что когда мы задаем блоку блочно строчное поведение мы говорим ему чтобы он стал символом в строке(т.е одной буквой), и соответственно между любыми буквами должен быть отступ, отсюда и появляются эти непонятные отступы, есть несколько способов его убрать, отрицательный margin или обнулить размер шрифта родителю.

[toliboff]

2 часа назад, toliboff сказал:

Почему блок с классом 'col-4-2' позиционируется относительно нижней границы текста блока с классом 'col-4-1'?