4
It seems that the HTML by default puts a damn"whitespace-only text node" among the elements of inline level with this I gain a "margin" between the elements that I cannot remove from the DOM
I know there are solutions like putting display:flex at the Father, or by float in the elements. But I wanted to remove all these whitespace node at once without the need of such tricks (or of gambiarras as margin-left:-4px).
Firefox shows by Devtools these nodes
Here’s another simple example simulating the problem:
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>When Chrome renders the code it puts each LI on a line, even if the code is in one line! Note that even if Chrome puts each LI on one line one example is still bugged and the other is not bugged...
Does anyone have any tips on how to remove this whitespace-only text node between the elements of the DOM, even if it is with jQuery or something like?
Link to Mozilla article on the subject: https://blog.nightly.mozilla.org/2016/10/17/devtools-now-display-white-space-text-nodes-in-the-dom-inspector/
Another interesting article: https://medium.com/@patrickbrosset/when-does-white-space-Matter-in-html-b90e8a7cdd33
It is not the HTML you insert, it is you breaking the lines. If you omit the spaces they do not appear in the DOM. Removing later is gambiarra in the same way. Bad for bad, can put the breaks in comment
<elemento><!-- quebra de linha --><elemento>or even break inside the tag<elemento quebradelinha><elemento>- Then it gets ugly only in aesthetics, and not in the DOM. Even, the question and the answer simply generate unnecessary work, because space hinders less than a code to take, I can not see the meaning of this (but there is already my opinion).– Bacco
@Bacco as you said each has a way of dealing with this "problem", but when you make a menu using UL/LI for example this space can easily break your layout, in addition it always adds up the lateral margins, like the margin-left:10px will actually be the 10px plus this node...
– hugocsl
I know how it is, there are posts on Sopt dealing with this precisely. I think I myself must have answered some. The fact is that these nodes only enter the DOM if the author of the page put them, what I question is just this: it takes less work and side effect no longer put in the code, instead of taking after. Remember that the indentation and formatting of HTML only serves the author of the page, and not the end user. Nothing prevents to publish it more lean after ready (without the breaks where they "bother"). If you don’t break the line between the <li>, you already solve at the origin, without ever entering the DOM.
– Bacco