Как убрать отступ при display-inline?

Когда вы используете свойство display: inline;, элементы выровнены в строку и между ними появляются небольшие пробелы или отступы. Это происходит потому, что пробелы и переносы строк между элементами в разметке интерпретируются как пробелы визуального форматирования.

Есть несколько способов, чтобы убрать эти отступы:

1. Удалите пробелы и переносы строк в разметке между элементами. Например:

<span>элемент 1</span><span>элемент 2</span>

2. Установите font-size: 0; для родительского контейнера и восстановите желаемый размер шрифта для дочерних элементов. Например:

<div class="container">
  <span class="item">элемент 1</span>
  <span class="item">элемент 2</span>
</div>

.container {
  font-size: 0;
}

.item {
  font-size: 16px; /* или другой размер шрифта */
}

3. Используйте комментарии в разметке между элементами. Например:

<span>элемент 1</span><!--
--><span>элемент 2</span>

4. Установите letter-spacing: -1px; для родительского контейнера. Это может помочь уменьшить или убрать отступы между элементами, но может изменить внешний вид текста. Например:

.container {
  letter-spacing: -1px;
}

Используйте один из этих методов, в зависимости от ваших требований и структуры вашей разметки. Это поможет вам избежать отступов при использовании display: inline;