Почему между inline-block появляются пробелы?

Причина появления пробелов

Когда вы используете display: inline-block для элементов, браузер обрабатывает их как строчные блоки. В HTML пробелы, табуляции и переносы строк между тегами считаются текстовыми узлами. Поскольку inline-block элементы ведут себя как текст, эти пробелы отображаются в виде видимых промежутков.

Пример проблемы

<div>
  <span style="display: inline-block; width: 50px; height: 50px; background: red;"></span>
  <span style="display: inline-block; width: 50px; height: 50px; background: blue;"></span>
</div>

Между красным и синим квадратами появится пробел шириной около 4px.

Способы решения

• Убрать пробелы в разметке: написать элементы в одну строку без пробелов.
• Использовать комментарии: <!-- --> между тегами.
• font-size: 0: установить родителю font-size: 0, а затем явно задать размер шрифта для дочерних элементов.
• Отрицательный margin: применить margin-right: -4px (зависит от размера шрифта).

Пример с font-size: 0

<div style="font-size: 0;">
  <span style="display: inline-block; width: 50px; height: 50px; background: red; font-size: 16px;"></span>
  <span style="display: inline-block; width: 50px; height: 50px; background: blue; font-size: 16px;"></span>
</div>

Этот метод часто используется на практике, так как не требует изменения HTML-структуры.

Вывод

Пробелы между inline-block элементами — это особенность обработки пробелов в HTML. Понимание этого помогает избежать неожиданных отступов в вёрстке. Рекомендуется использовать font-size: 0 на родителе или писать элементы в одну строку для чистоты кода.