Skip to main content
1 de 4
Luiz Felipe
  • 36,5mil
  • 10
  • 74
  • 154

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.

É 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:

<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.

Luiz Felipe
  • 36,5mil
  • 10
  • 74
  • 154