Разрыв между двумя элементами inline-block <span>

Я создал два элемента вместе в html и сделал каждый встроенный блок. Я обнаружил, что между этими двумя элементами всегда был пробел, но на самом деле я не устанавливал для них никаких дополнений/полей. Может ли кто-нибудь сказать мне, почему и как я могу исправить этот пробел?

Ответ 1

CSS:

span {
  display: inline-block;
}

HTML:

<span>This will have</span>
<span>a gap between the elements</span>

<span>This won't have</span><span>a gap between the elements</span>

Ответ 2

Вы можете удалить пробелы и сохранить красивое форматирование кода, используя комментарии HTML.

   <span>1</span><!--
--><span>2</span><!--
--><span>3</span>

Ответ 3

когда вы используете inline-blocks, для удаления поля просто примените word-spacing: -3px; и letter-spacing: -3px; к родительскому контейнеру, а затем верните эти правила на встроенных блоках с помощью word-spacing: normal; и letter-spacing: normal;

например. с этой базовой разметкой

<div>
   <span>...</span>
   <span>...</span>
   <span>...</span>
</div>

минимальный код CSS

div {
   word-spacing: -3px;
   letter-spacing: -3px;
}

span {
   word-spacing: normal;
   letter-spacing: normal;
   display: inline-block;
}

Другая возможность (которую я не рекомендую, но может быть полезной для вас знать, в любом случае) заключается в установке font-size: 0; в родительский контейнер.

Ответ 4

Это странное поведение, которое можно зафиксировать, изменило вашу разметку на что-то вроде этого.

<div class="inline">
   first
</div><div class="inline">
   second
</div>

Не устанавливайте какое-либо пространство при определении другого встроенного элемента.