I am getting an unwanted line before my <span>
elements, and it shows as an empty dot in the developer mode of Firefox. How do I get rid of it?
It is not pseudo element of the div, so span::before
doesn't work. And I have no idea how it is generating.
<div class="coll-details">
<h5>Div title</h5>
<span class="fa counts fa-eye"> 234</span>
<span class="fa counts fa-heart"> 123</span>
<span class="fa counts fa-comment"> 123</span>
<span class="fa counts fa-share"> 123</span>
</div>
The white space text nodes are being adding before the span tags.
HTML. Approach 2: We can also eliminate the extra space using the margin-top property. The margin-top property sets the top margin of an element.
In this CSS word-spacing example, we have removed 3px of space between the words by setting a -3px value for the word-spacing property. This removes some of the word spacing that has been added by the selected font.
HTML adds "white space text node" after some elements ( all inline elements), because it considers the white space between these elements part of them and it preserves them. So you can remove white space in html source or with javascript: from the inspector see which element has nextSibling empty text node.
I second Rory McCrossan's suggestion. Since span
is inline element the spaces between them are preserved in html output. And newlines are changed to spaces too. For Example:
<div>
<span>A</span> <span>B</span>
</div>
<div>
<span>A</span>
<span>B</span>
</div>
<div>
<span>A</span><span>B</span>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With