Отступы между элементами с inline-block

Откуда берутся отступы между элементами с display: inline-block и как их убрать? Отступы нигде не фиксируются:

Ответ

Дело в том, что inline-block рендерится браузером как буква. Расстояние, которое вы видите между inline-block и соседними "буквами" – обычный межбуквенный интервал или, если брать термин из типографики, трекинг.
Трекинг не является фиксированным значением и меняется в различных семействах шрифтов, а также зависит от размера шрифта. Из-за этого мы не можем использовать для решения этой проблемы фиксированные значения в свойствах word-spacing, margin и т.д.
Эффективно убрать отступы у inline-block можно несколькими способами:
Вариант 1
В разметке убираем переносы для кнопок.

Вариант 2
На родителя ставим font-size: 0; а уже к button задаем нужный размер шрифта.
main { font-size: 0; }
button { font-size: 14px; }
Вариант 3
Можно закомментировать конец и начало строки.