Essa diferença acontece porque, ao exibir o HTML, os _browsers_ condensam uma sequência de caracteres em branco (i.e. espaços, quebras de linha etc) em apenas um espaço. Esse comportamento é padrão para qualquer elemento que não possuir a propriedade [`white-space`](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space) definida como `pre` ou `pre-wrap`.

É por isso, aliás, que, se você quiser exibir múltiplos espaços, você deve utilizar N ` `s (_non-breaking space_) explicitamente, que não sofrem essa condensação.

Portanto, para remover os espaços entre os _spans_, você deve procurar algum jeito de remover (ou esconder) os caracteres em brancos que existem entre eles  no HTML (as quebras de linha e os espaços da indentação).

Uma forma de se fazer isso é simplesmente não os indentar, conforme feito no primeiro exemplo:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

    <div>
      <span>1</span><span>2</span><span>3</span>
    </div>

<!-- end snippet -->

Uma outra alternativa é utilizar comentários, conforme mostra [esta resposta][1] do SOen:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

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

<!-- end snippet -->

<sup>Note que agora todos os caracteres em branco (no exemplo, quebras de linha e espaços) fazem parte agora do comentário, e não da marcação que será exibida pelo _browser_.</sup>

Se você não puder mexer no HTML, uma outra opção, utilizando CSS, é reduzir o tamanho da fonte a zero para a `<div>` (que contém os espaços) e definir o tamanho normal para cada `<span>`. Algo assim:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    .without-spacing {
      font-size: 0;
    }

    .without-spacing span {
      font-size: initial;
    }

<!-- language: lang-html -->

    <div>
      <span>1</span>
      <span>2</span>
      <span>3</span>
    </div>

    <div class="without-spacing">
      <span>1</span>
      <span>2</span>
      <span>3</span>
    </div>

<!-- end snippet -->

<sup>Note que, neste último exemplo, não estamos removendo de fato os caracteres em branco, mas sim escondendo-os com esse pequeno artifício. Se você selecioná-los e "copiar", verá que ainda existirá um espaço entre cada elemento. Portanto, utilize essa alternativa apenas para fins visuais.</sup>

  [1]: https://stackoverflow.com/a/60173376/7445826