7

Estava realizando uma organização em alguns códigos aqui antes commitar e percebi que uma indentação no HTML causou um problema no meu layout, então fui inspecionar para descobri o que eu tinha feito de errado além de indentar, e descobri que as quebras de linhas para indentação acabaram aumentando o espaço entre 2 elementos.

Segue um exemplo que demonstra a mesma estrutura html indentada e inline (também aqui):

<div style="font-size: 44px;">
  <span>28.3</span>
  <span>km</span>
</div>

<div style="font-size: 44px;"><span>28.3</span><span>km</span></div>

Perguntas:

  • Por que isso ocorre?
  • Como indentar meu código e não ter esse espaço?
3
  • ao meu ver faz sentido, porque entre as tags span, existe algum elemento (quebra de linha e espaço) apenas espaços antes ou depois da tag seriam desconsiderados
    – h3nr1ke
    16/02/2018 às 16:03
  • @h3nr1ke, só existe ali a quebra de linha e os recuos, mas se você remover todos os recuos, ele ainda manterá o espaço em banco, então é a quebra de linha que causa o espaço em branco. E poderia informar algum fonte sobre a afirmação: "apenas espaços antes ou depois da tag seriam desconsiderados"? 16/02/2018 às 16:35
  • não tenho uma fonte... foi o teste que eu fiz no seu fiddle... mas as explicações do pessoal abaixo foram muito completas e cheias de referências ^^V
    – h3nr1ke
    16/02/2018 às 16:56

3 Respostas 3

6

Segundo o W3, todos os caracteres abaixo são considerados espaço em branco.

  • ASCII space (&#x0020;)
  • ASCII tab (&#x0009;)
  • ASCII form feed (&#x000C;)
  • Zero-width space (&#x200B;)

Uma quebra de linha é definida como &#x000D; (Carriage return) e &#x000A; (Line Feed). E isso também a torna um espaço em branco.

A ISO-8879 especifica que uma quebra de linha imediatamente após uma marca de início deve ser ignorada, assim como uma quebra de linha imediatamente antes do fechamento de uma tag.

Nota 1: Apesar de haver um espaço em branco + quebra de linha (que também é considerado espaço em branco), o navegador acaba condensando esses caracteres. É o mesmo que fazer a b e a saída ser a b

Nota 2: Vale lembrar que os navegadores interpretam dessa forma todos os elementos HTML, exceto <pre> e elementos com css white-space: pre.


Referências:
¹ https://www.w3.org/TR/REC-html40/struct/text.html#h-9.1
² https://www.w3.org/TR/REC-html40/struct/text.html#line-breaks

3
2

Na realidade é justamente por conta da indentação que ocorre o espaçamento, pois se observar bem está sendo gerado um espaço, o motor de renderização de html dos navegadores ignora os espaços adicionais (quando há mais que 1 espaço), mas ainda assim o primeiro deles é renderizado, o ideal quando não se quer o espaço é que seja colocado na mesmo linha:

<div style="font-size: 44px;">
  <span>28.3</span><span>km</span>
</div>

Assim elimina-se o problema.

4
  • 1
    Não é por causa da indentação, é a quebra de linha mesmo. Se você deixar o segundo span no início da segunda linha, vai ter quebra de linha e neste caso não há espaços.
    – Jéf Bueno
    16/02/2018 às 16:11
  • Na realidade o que você disse @LINQ, o problema é também a indentação, pois há espaços estão nela. Porém a quebra de linha também. Veja que o motor de renderização interpreta algum dos caracteres de quebra -\n ou \r- (não sei em qual SO ele está), mas renderiza como espaço também. Neste fiddle tem um exemplo com todos os casos:jsfiddle.net/L287m1k4 16/02/2018 às 16:27
  • Pois bem, levando em conta a afirmação do @LINQ, que está correta, não é o espaço e sim a quebra de linha que está causando o espaço, e então como que ele renderiza um espaço se não há nenhum? Ou ele converte, qual a regra? 16/02/2018 às 16:32
  • Na realidade a resposta do @Valdeir Psr está bem mas completa que a minha, é que alguns caracteres especiais também são renderizados como espaço em branco 16/02/2018 às 16:35
1

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 &nbsp; (non-breaking space). Veja:

body {
  font-family: monospace;
}
A&nbsp;&nbsp;&nbsp;&nbsp;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.

1
  • Àqueles que negativaram: por favor, queiram justificar. O comentário de feedback é importante para que eu possa melhorar a resposta. Jamais ignoraria um comentário de feedback. 18/11/2020 às 14:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .