> Por que isso ocorre? 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`. Aliás, é por isso, que, se você quiser exibir mais de um espaço, você não pode simplesmente usar os caracteres de espaço (` `) na marcação, já que, como vimos, estes são condensados. Nesse caso, pode-se usar várias entidades HTML ` ` (_non-breaking space_). Veja: <!-- begin snippet: js hide: true console: true babel: false --> <!-- language: lang-css --> body { font-family: monospace; } <!-- language: lang-html --> A B <br /> |----| <!-- end snippet --> > Como indentar meu código e não ter esse espaço? 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