How to remove spaces between spans?

Question

I've no idea why my span showing extra spaces

I've tried applying padding: 0 px !important;

Fiddle : https://jsfiddle.net/bheng/536juzfn/

Answer 1

The spaces comes from the linebreak, if you remove the linebreak the spaces are gone.

<span>T</span><span>h</span><span>a</span><span>n</span><span>k</span><span>s</span><span>;</span>

Answer 2

The spaces appear since you have new lines and tabs between the <span> tags.

Solution 1

If you remove all of the space between the tags, there are no extra spaces:

<h1>
    <span>T</span><span>h</span><span>a</span><span>n</span><span>k</span><span>s</span><span>;</span>
</h1>

Solution 2

Alternatively, you can apply the css property white-space-collapse: discard; or display: flex; on the parent.

white-space-collapse is not fully implemented, so you should be using a flexbox for now.

h1 {
  display: flex;
  justify-content: center;
}

JSFiddle: https://jsfiddle.net/fcup764x/1/

Answer 3

The whitespace appears because of line-break on your html code. To remove it, simply, set flex layout on parent h1 tag as follows.

h1 {
  ...
  display: flex;
}