Ответ
Пробелы видны в HTML, когда они находятся между inline или inline-block элементами. Это происходит потому что браузер интерпретирует пробелы и переносы строк в исходном коде как текстовые узлы.
Пример:
<div>
<span>One</span>
<span>Two</span>
</div>
Между <span> будет виден пробел.
Способы устранения:
- Убрать пробелы в HTML:
<div><span>One</span><span>Two</span></div>
- Использовать
font-size: 0у родителя:
div { font-size: 0; }
span { font-size: 16px; }
- Комментарии между элементами:
<div>
<span>One</span><!--
--><span>Two</span>
</div>
- Flexbox или inline-block с отрицательным margin.