Skip to main content
adicionou 371 caracteres ao conteúdo
Fonte Link
Luiz Felipe
  • 36,5mil
  • 10
  • 74
  • 154

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, aliás, que, se você quiser exibir N espaçosmais de um espaço, devevocê 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 utilizar Nusar várias entidades HTML  s (non-breaking space) explicitamente, que não sofrem essa condensação. 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.

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.

É por isso, aliás, que, se você quiser exibir N espaços, deve-se utilizar N &nbsp;s (non-breaking space) explicitamente, que não sofrem essa condensação.

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.

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.

adicionou 3 caracteres ao conteúdo
Fonte Link
Luiz Felipe
  • 36,5mil
  • 10
  • 74
  • 154

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.

É por isso, aliás, que, se você quiser exibir múltiplosN espaços, você deve-se utilizar N &nbsp;s (non-breaking space) explicitamente, que não sofrem essa condensação.

Como indentar meu código e não ter esse espaço?

Portanto, paraPara 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.

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 &nbsp;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.

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.

É por isso, aliás, que, se você quiser exibir N espaços, deve-se utilizar N &nbsp;s (non-breaking space) explicitamente, que não sofrem essa condensação.

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.

adicionou 3 caracteres ao conteúdo
Fonte Link
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 &nbsp;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.

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 &nbsp;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.

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 &nbsp;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.

Fonte Link
Luiz Felipe
  • 36,5mil
  • 10
  • 74
  • 154
Carregando