Как убрать добавленный интервал при использовании :: first-letter на кнопке?

Question

Я вижу дополнительный интервал, добавленный к кнопкам, которые используют некоторые стили ::first-letter. Похоже, это определяется браузером c, потому что это происходит для меня в Firefox (74 и 63), но не Chrome и Safari.

<style type="text/css">
  .caps button::first-letter {
    text-transform: uppercase;
  }
</style>

<div>
  <button>foo bar</button>
  <br/>
  <button>much longer button label text</button>
</div>

<div class="caps">
  <button>foo bar</button>
  <br/>
  <button>much longer button label text</button>
</div>

text-transform и font-size добавить интервал, но color нет. Я уверен, что есть и другие стили, которые также влияют на это.

А кнопки с более длинным текстовым содержимым получают пропорционально больший интервал. См. jsfiddle для нескольких примеров.

Это ожидаемое поведение? Есть ли лучшая практика для удаления добавленного пробела? Похоже, display: inline-flex добивается цели, но я не уверен, что это лучший маршрут.