span i等行内元素之间出现的诡异间隔

最近在做的一个项目里面碰到这么一个问题：

<p>
	<span>one</span>
	<span>two</span>
</p>

在“one”和“two”之间存在着一个大概3em的空白...图就不上了

这明显不符合预期....

最后发现：当这两个span写在一行...问题就解决了...

<p>
	<span>one</span><span>two</span>
</p>

原因在于 行内元素之间在换行时会产生一个换行符号，然后会占用一定的宽度...

同理 i 之类的行内元素也是会存在一样的问题

并且这个宽度是小于一个空格的...

 

/***********************更新*************/

之前的解决方法是，把所有的span都写到一行，这当然是最稳妥的做法，但是带来的麻烦肯定是有的...这意味着需要书写一行特别特别长的代码，按照代码规范来看，一行代码是最好不要超过50还是200个字符来着....（具体请参阅efe代码规范）

所以有三种解决方法：

1、在js里拼接好字符串后再通过innerHtml方法显示出来

2、这个空白貌似确实就是3em大小，所以只要设置span的margin-right: -3em即可，亲测有效，唯一不爽的地方是，如果行内存在i  em之类其他的元素，每个元素都得设置一下margin-right，并不是很爽= =！

3、换行符号的宽度是由所在标签的字体大小有关，以上面的代码为例，p的font-size越大，块1与块2之间的空白就越宽，反之则越小。

所以解决方案就是：将p的font-size设为0,然后对应的字体重新设置

 

ps:江湖偏方，将span元素设置浮动，间隙瞬间没有啦！

 

综上所述：

1、span标签较短，可直接将标签写在一行，简单粗暴；

2、标签较长，使用font-size:0去做

3、保险方案使用js字符串拼接，高、大、上！