Рука смайликов «Здесь» имеет дополнительное пространство, как я могу решить эту проблему с CSS элегантно?

Question

p {
  font-size: 16px;
}

<p>
  <span>?</span>
  <span>Here</span>
  <span>?</span>
</p>

Как видите, в левой руке смайликов есть дополнительное пустое место.

В настоящее время я добавляю padding-left: 0; padding-right: 5px; к центральная строка.

Но есть ли другой способ или свойство CSS, которое может решить эту проблему?

Мой браузер Chrome 80, на самом деле немного свободного места.

Хотя одна строка удалит пробел, но проблема все еще остается:

Использование псевдо-класса тоже не помогает, обратите внимание, что все еще нет очереди

Answer 1

Я много обманывал, но это похоже на работу

p {
  font-size: 16px;
  letter-spacing: -6px;
}
.letters{
  letter-spacing: 0.01em;
  padding-left: 0.35em;
}

<p>
  ?
  <span class="letters">Here</span>
  ?
</p>

Answer 2

Emojis на самом деле просто украшение, а не содержание. Используйте элементы psuedo, и проблема решена.

p {
  font-size: 16px;
}

p > span::before{
  content: '?';
}

p > span::after{
  content: '?';
}

<p>
  <span>Here</span>
</p>

Answer 3

Это из-за горизонтального элемента (span), а не emoji

, установите элемент p font-size: 0 или разрешите все теги span в одной строке