using two spans inside a paragraph adds a space

Question

I a got a weird situation and I can not figure out why this is happening. I have the following simple situation:

<p>
  <span class="bold">N</span>
  <span class="bold">ote</span>
</p>

With the following CSS class:

.bold{
  font-weight:bold;
}

When I run this code I will get the following output: N ote.

I find this pretty weird because whenever I use the following HTML code:

<p>
  <span class="bold">N</span><span class="bold">ote</span>
</p>

The output will be: Note

Now I am curious what is causing this effect?

In the first example you have a newline that counts as a whitespace, and inline elements take that into consideration thus adding a gap between the words. Similar to this problem: https://css-tricks.com/fighting-the-space-between-inline-block-elements/ — Pustur, May 02 '16 at 08:31
And also [How do I get rid of white spaces between spans without manipulating the HTML?](http://stackoverflow.com/questions/11235151/how-do-i-get-rid-of-white-spaces-between-spans-without-manipulating-the-html) — Vucko, May 02 '16 at 08:35

score 0 · Answer 1 · answered May 02 '16 at 08:38

0

Line break is causing a space space/tab/enter all will create a space in inline tags. I think.

answered May 02 '16 at 08:38

Ajit

1

You should post this as a comment. Especially if you're not sure about something :-) – Chris May 02 '16 at 08:39
Thanks Chris. I don't have enough reputation to post as comment to the main thread. :) – Ajit May 02 '16 at 09:27

score 0 · Answer 2 · answered May 02 '16 at 08:47

0

1)make all spans at the same line and it should solve it.if that dose not work try number 2.

2)
span{ margin:0;padding:0; }

answered May 02 '16 at 08:47

ermias amb

score -1 · Answer 3 · answered May 02 '16 at 08:37

-1

The other way around to do it is

.bold{
      font-weight:bold;
 }
span.bold:after{
    content:"ote";
 }

CSS tricks has partially solved the problem but it may not work if you format your HTML code.

answered May 02 '16 at 08:37

fruitjs

3 Answers3