4

Parece que o HTML por default coloca um maldito"whitespace-only text node" entre os elementos do inline level com isso eu ganho uma "margem" entre os elementos que não consigo remover do DOM

Sei que existem soluções como colocando display:flex no Pai, ou colocando float nos elementos. Porém queria remover todos esses whitespace node de uma vez sem precisar dessas artifícios (ou de gambiarras como margin-left:-4px).

O FireFox mostra pelo DevTools esses nodes

inserir a descrição da imagem aqui

Aqui tem um outro exemplo simples simulando o problema:

ul li {
    display: inline-block;
    padding: 10px;
    background-color: palevioletred;
}
<h2>Exemplo com Imagem</h2>
<div>
    <img src="http://unsplash.it/100/100" alt="">
    <img src="http://unsplash.it/100/100" alt="">
    <img src="http://unsplash.it/100/100" alt="">
    <img src="http://unsplash.it/100/100" alt="">
</div>
<br>
<img src="http://unsplash.it/100/100" alt=""><img src="http://unsplash.it/100/100" alt=""><img src="http://unsplash.it/100/100" alt=""><img src="http://unsplash.it/100/100" alt="">
<br>
<h2>Exemplo com ul/li { display:inline-block }</h2>
<ul>
    <li>item|</li>
    <li>item|</li>
    <li>item|</li>
    <li>item|</li>
</ul>
<br>
<ul>
    <li>item|</li><li>item|</li><li>item|</li><li>item|</li>
</ul>

Quando o Chrome renderiza o código ele coloca cada LI em uma linha, mesmo no código estando em uma linha só! Repare que mesmo o Chrome colocando cada LI em uma linha um exemplo continua buggado e o outro não...

inserir a descrição da imagem aqui

Alguém tem alguma dica de como remover esse whitespace-only text node entre os elementos do DOM, mesmo que seja com jQuery ou algo do tipo?

Link com artigo da Mozilla sobre o assunto: https://blog.nightly.mozilla.org/2016/10/17/devtools-now-display-white-space-text-nodes-in-the-dom-inspector/

Outro artigo interessante: https://medium.com/@patrickbrosset/when-does-white-space-matter-in-html-b90e8a7cdd33

3
  • 2
    Não é o HTML que insere, é você quebrando as linhas. Se omitir os espaços eles não aparecem no DOM. Remover depois é gambiarra da mesma forma. Ruim por ruim, pode por as quebras em comment <elemento><!-- quebra de linha --><elemento> ou mesmo quebrar dentro da tag <elemento quebradelinha><elemento> - Aí fica feio só na estética, e não no DOM. Inclusive, a pergunta e a resposta simplesmente geram um trabalho desnecessário, pois o espaço atrapalha menos do que um código pra tirar, não consigo ver o sentido disso (mas ai ja é opinião minha).
    – Largato
    Commented 6/04/2018 às 17:13
  • @Bacco como vc falou cada um tem uma forma de lidar como esse "problema", mas quando vc faz um menu usando UL/LI por exemplo esse espaço pode facilmente quebrar o seu layout, além disso ele sempre se soma as margins laterais, tipo o margin-left:10px será na verdade os 10px mais esse nó...
    – hugocsl
    Commented 6/04/2018 às 17:54
  • 3
    Sei bem como é, tem posts no SOpt tratando disso justamente. Acho que eu mesmo devo ter respondido alguma. O fato é que estes nós só entram no DOM se o autor da página os colocar, o que eu questiono é justamente isso: dá menos trabalho e efeito colateral já não colocar no código, em vez de tirar depois. Lembrando que a indentação e formatação do HTML só serve para o autor da página, e não para o usuário final. Nada impede de publicar ele mais enxuto depois de pronto (sem as quebras onde elas "incomodam"). Se não quebrar linha entre os <li>, já resolve na origem, sem nunca entrarem no DOM.
    – Largato
    Commented 6/04/2018 às 18:07

3 Respostas 3

4

a quebra de linha irá gera um espaço em branco no HTML em elementos inline-block, mas comentando irá resolver

<div>
 <img src="" alt=""><!--
--><img src="" alt="">
</div>
2
  • 1
    hahaha gambeta master essa, mas ta valendo
    – hugocsl
    Commented 6/04/2018 às 17:18
  • 4
    +1, Do ponto de vista do DOM, esta é a unica resposta que faz sentido.das apresentadas até o momento. Outras alternativas seriam simplesmente omitir a quebra totalmente, e quebrar dentro do elemento em vez de fora.
    – Largato
    Commented 6/04/2018 às 17:23
3

Você pode remover excluindo os nodeType 3, que representam nós de texto (inclusive os espaços), mas isso também removerá textos caso houver.

Para isso pode-se usar .contents().filter():

$('#teste').contents().filter(function(){
    return this.nodeType == 3;
}).remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="teste">
    <img src="http://unsplash.it/100/100" alt="">
    <img src="http://unsplash.it/100/100" alt="">
    <img src="http://unsplash.it/100/100" alt="">
    <img src="http://unsplash.it/100/100" alt="">
</div>

3

Uma outra forma de eliminar os espaços é setar font-size: 0, mas você terá que, se houver textos em elementos-filhos, redefinir o tamanho da fonte nesses elementos.

Exemplo:

#teste{
   font-size: 0;
}
<div id="teste">
    <img src="http://unsplash.it/100/100" alt="">
    <img src="http://unsplash.it/100/100" alt="">
    <img src="http://unsplash.it/100/100" alt="">
    <img src="http://unsplash.it/100/100" alt="">
</div>

1
  • É eu tinha visto em algum lugar que isso resolvia mesmo, colocar float:left ou display:flex também resolve, mas considerei essas opções no critério "gambiarra" rss, a resposta com o JS resolve plenamente, aproveito para agradecer!
    – hugocsl
    Commented 29/03/2018 às 10:13

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 .