remove space between text words and punctuation mark

Question

I have this simple HTML - three span elements each containing a text element:

HTML

<span>5</span>
<span>,</span>
<span>000</span>

As you can see here there is space between the 5 and the , elements although padding and margin equal zero. This is probably due to font containers margins or something like that. How do remove those spaces?

EDIT Thanks to everyone. One important clarification - the span items are added using jQuery's append method so there is no way I can place them in one line

Answer 1

You can prevent rendered whitespace with float or font-size. No need to change your HTML for spans, but a parent element is necessary.

/* Float method */
.float {
  overflow: hidden /* Or any other method to clear float */;
}

.float span {
  float: left;
}

/* Font size method */
.fontsize {
  font-size: 0;
}

.fontsize span {
  font-size: 1rem;
}

<div class="float">
  <span>5</span>
  <span>,</span>
  <span>000</span>
</div>

<div class="fontsize">
  <span>5</span>
  <span>,</span>
  <span>000</span>
</div>

Answer 2

Like this:

<span>5</span><span>,</span><span>000</span>

If you don't want (typographical) spaces, then don't write spaces!

That said, I appreciate this isn't always desirable, especially when writing more complex structures. In such a case, you can (and typically should) minify your HTML before sending it to the browser - personally, I strip all newlines and tabs as "unnecessary" (if I actually want a space, I manually type one) and this works quite well.