如何从 HTML 中删除“不可见空间”

How to remove "Invisible space" from HTML

提问by Icemanind

Possible Duplicate:
A Space between Inline-Block List Items

可能的重复：
内联块列表项之间的空格

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

我有我的 html 代码的JSFiddle 演示。这是这里的代码：

<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 displaystyle is set to none, so can someone please tell me how I can get the Hello World!phrase without the space?

我遇到的问题是在 Hello World! 中的“o”和“r”之间插入了一个额外的空格。该display样式设置为无，所以有人请告诉我怎样才能得到Hello World!，而没有空间句话？

回答by Zoltan Toth

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

换行符导致它 - http://jsfiddle.net/RhvjF/1/

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

找不到特定的帖子，但聪明的人提出了 3 种修复方法：

1. Put everything in one line (remove all line breaks)

2. Comment out the line breaks, like

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

3. Set the container font-sizeto 0and re-set it for span-s

1. 将所有内容放在一行中（删除所有换行符）

2. 注释掉换行符，比如

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

3. 将容器设置font-size为0并重新设置为span-s

UPDATE

更新

There are at least 2 more ways:

至少还有 2 种方法：

1. Break the tags, like

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

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

1. 打破标签，比如

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

2. 浮动元素，即 span { float: left }

回答by James Hill

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

这是由换行引起的。你有两个选择：

1. Remove the line breaks
2. Float your content.

1. 删除换行符
2. 浮动您的内容。

Option 1

选项1

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

Option 2

选项 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>

回答by Oriol

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

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

HTML:

HTML：

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

CSS:

CSS：

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