8

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">&nbsp;234</span>
    <span class="fa counts fa-heart">&nbsp;123</span>
    <span class="fa counts fa-comment">&nbsp;123</span>
    <span class="fa counts fa-share">&nbsp;123</span>
</div>

The white space text nodes are being adding before the span tags.

Find the image here

TylerH
  • 19,065
  • 49
  • 65
  • 86
Atul Kumar
  • 109
  • 1
  • 2
  • 10

3 Answers3

11

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>
user31782
  • 5,979
  • 8
  • 54
  • 117
  • 3
    This is quite annoying behaviour of FF. All other browsers (inlc. IE11) ignore spaces inside HTML source and render it properly. Only Firefix (tested Quantum 66.04) adds extra pixels between them. Should be reported as a bug actually. Removing white space solves the issue, but source becomes hardly legible - which a often need to inspect during development. – lubosdz Oct 10 '19 at 13:49
0

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. In your case it's span, and do this for each element:

element.nextSibling.parentNode.removeChild(element.nextSibling);
Rezan Moh
  • 43
  • 5
-1

Replacing

<span class="fa counts fa-eye"></span>

With 

<span class="fa counts fa-eye"/>

Should solve the issue.

In addition to this, setting the font-size to 0 via CSS should work too.

Shahroq
  • 769
  • 1
  • 6
  • 12
  • It works, but not because It’s a self-closing tag. HTML doesn’t support self-closing tags. It’s the same as writing only open tags. – kirilloid Oct 07 '19 at 18:11
  • 1
    @kirilloid HTML doesn't support self-closing tags? What about ?
    ? ? ? And the other dozen or so self-closing tags.     – TylerH Oct 28 '19 at 13:56
  • I meant self-closing as in XML. Tags like `img` or `hr` are actually called _void_ elements in spec. And `span`s aren't void/self-closing ones. Here's a good (and concise) overview of how self-closing tags are parsed in HTML: https://stackoverflow.com/a/3558200/255363 – kirilloid Oct 29 '19 at 14:08