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
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:
body {
font-family: monospace;
}
A B <br />
|----|
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:
<div>
<span>1</span><span>2</span><span>3</span>
</div>
Uma outra alternativa é utilizar comentários, conforme mostra esta resposta do SOen:
<div>
<span>1</span><!--
--><span>2</span><!--
--><span>3</span>
</div>
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.
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:
.without-spacing {
font-size: 0;
}
.without-spacing span {
font-size: initial;
}
<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>
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.