How to remove "Invisible space" from HTML

Question

Possible Duplicate:
A Space between Inline-Block List Items

I have a JSFiddle demo of my html code. Here is the code here:

<span style="display: inline">Hello Wo</span>
<span style="display: none;"></span>
<span style="display: inline">rld</span>

The problem I'm having is that an extra space is being inserted between the 'o' and the 'r' in Hello World!. The display style is set to none, so can someone please tell me how I can get the Hello World! phrase without the space?

score 27 · Accepted Answer · edited Oct 15 '12 at 15:31

27

The linebreaks are causing it - http://jsfiddle.net/RhvjF/1/

Can't find the particular post, but smart people suggested 3 ways of fixing it:

Put everything in one line (remove all line breaks)

Comment out the line breaks, like

<span style="display: inline">Hello Wo</span><!--
--><span style="display: none;"></span><!--
--><span style="display: inline">rld</span>

Set the container font-size to 0 and re-set it for span-s

UPDATE

There are at least 2 more ways:

Break the tags, like

<span style="display: inline">Hello Wo</span
><span style="display: none;"></span
><span style="display: inline">rld</span>

Float the elements, i.e. span { float: left }

edited Oct 15 '12 at 15:31

Icemanind

47,519
50
171
296

answered Aug 29 '12 at 17:26

Zoltan Toth

46,981
12
120
134

The fact that the line breaks are causing the issue seems like such an obvious answer, but I didn't see it. Thank you for the help – Icemanind Aug 29 '12 at 17:37
you are welcome :) most people have this issue with `
`-s though

Zoltan Toth

Aug 29 '12 at 17:38

For completeness, the other way is to break the lines inside the tags, as per the second example on this page from the HTML5 spec: http://dev.w3.org/html5/spec/the-section-element.html#the-section-element – Alohci Aug 29 '12 at 17:42

3

Personally, I'm not a fan of solutions #2 or #(4). It makes the markup less readable. – Shmiddty Aug 29 '12 at 17:53

@Shmiddty they are verbose indeed, but they exist and someone might find them useful, so it wouldn't be fair to exclude solutions based on personal preferences :) – Zoltan Toth Aug 29 '12 at 17:55

1

@ZoltanToth But, think of the children! Someone else will be handling this code at some point, surely. – Shmiddty Aug 29 '12 at 17:57

@Shmiddty Children should read the comments too and there they'll find your warning – Zoltan Toth Aug 29 '12 at 18:01

James Hill · Answer 2 · 2013-03-23T14:21:15.347

8

This is caused by line breaks. You have two choices:

Remove the line breaks
Float your content.

Option 1

<span style="display: inline">Hello Wo</span><span style="display: none;"></span><span style="display:inline">rld</span>

Option 2

<style>
    #spanContainer > span { float:left; }
</style>

<div id="spanContainer">
    <span style="display: inline">Hello Wo</span>
    <span style="display: none;"></span>
    <span style="display: inline">rld</span>
</div>

edited Mar 23 '13 at 14:21

answered Aug 29 '12 at 17:28

James Hill

60,353
20
145
161

There's (at least) a third choice, see my answer – Oriol Aug 29 '12 at 17:31
@Oriol, See Tyler's point on your answer – James Hill Aug 29 '12 at 17:33
It is easier for me to put the tags on one line rather then mess with the CSS styling. I am actually using absolute font sizes, so as Tyler pointed out, Oriol's solution probably wouldn't be the best solution for me. For me, deleting the line breaks and putting it one line is the best option. – Icemanind Aug 29 '12 at 17:39

score 5 · Answer 3 · answered Aug 29 '12 at 17:30

5

See http://jsfiddle.net/RhvjF/2/

HTML:

<div id="wrapper">
    <span style="display: inline">Hello Wo</span>
    <span style="display: none;"></span>
    <span style="display: inline">rld</span>
</div>

CSS:

#wrapper{
    font-size:0;
}
#wrapper>*{
    font-size:16px; /* Or whatever you want */
}

answered Aug 29 '12 at 17:30

Oriol

274,082
63
437
513

3

One can't use relative font sizes when using the strategy, though. – Tyler Crompton Aug 29 '12 at 17:31

How to remove "Invisible space" from HTML

3 Answers3

Linked

Related