重构工程师们在设计代码时，有喜欢手动删除行内元素之间产生的额外空隙，并通过设置margin或padding来获取想要间距吗？如代码：

      
       去掉了间距
       去掉了间距
       去掉了间距
       去掉了间距
       去掉了间距
       去掉了间距
      

然而删除间距后，代码堆成了一片，看得起很不舒服，特别是从重构转给JS同事后，JS同事看完代码后就会提出抱怨，代码太乱，他们更希望看到的是这样的代码：

      
       　　
       换行符产生间距　　
       换行符产生间距　　
       换行符产生间距　　
       换行符产生间距　　
       换行符产生间距　　
       换行符产生间距
      

其实，给JS同事带来的清晰的、方便阅读和修改的代码，也是重构工程师能力的体现。

了解行内元素产生水平间距的原因有助于我们解决这个问题，那么产生这些间距的原因是什么呢？

1.行内元素之间的“换行符”产生间距

      
       换行符产生间距
       换行符产生间距
       换行符产生间距
       换行符产生间距
       换行符产生间距
       换行符产生间距
      

展现效果如下：

2.行内元素之间使用“tab(制表符)”产生间距

      
       　　
       换行符产生间距　　
       换行符产生间距　　
       换行符产生间距　　
       换行符产生间距　　
       换行符产生间距　　
       换行符产生间距
      

展现效果如下：

3.行内元素之间使用“空格”产生间距

      
       换行符产生间距 
       换行符产生间距 
       换行符产生间距 
       换行符产生间距
       换行符产生间距 
       换行符产生间距
      

展现效果如下：

上以上3点可以看出，行内元素之间产生的间距，是由于换行符、tab(制表符)、空格等字符引起，而字符的大小是定义字体大小来控制。

那么改变字体的大小可调整行内元素的间距么?

上图把字体从0px~18px~36px的调整，可见行内元素之间的水平间距从无到有，并不断变大，说明行内元素之间产生间距是由换行符、tab(制表符)、空格等字符引起的，那么设置字体大小font-size:0可以是不是可以在所有浏览器中除去这些间距呢？

经过测试后，可发现设置font-size:0并不能使得换行符、tab(制表符)、空格等在所有浏览器中产生的额外间距消失：

1.IE6、7浏览器始终存在的 1px 空隙

2.最新版本的Safari浏览器（5.1.7）不支持定义字体大小为 0 的浏览器

通过查找资料后，一种比较正常的解决方法如下：

1.针对IE6、7浏览器，使用word-spacing 修复 IE6、7 中始终存在的 1px 空隙，减少单词间的空白（即字间隔）

*word-spacing:-1px;

2.使用webkit的私有属性，让字体大小不受设备终端的调整，可定义字体大小小于12px

html{-webkit-text-size-adjust:none;}

问题解决了，代码如下：

结构：
      
    
       字符产生间距    
       字符产生间距    
       字符产生间距    
       字符产生间距    
       字符产生间距    
       字符产生间距
      
样式：html{
    　　-webkit-text-size-adjust:none;/* 使用webkit的私有属性，让字体大小不受设备终端的调整，可定义字体大小小于12px */ }.span-wrap {
        font-size:0;/* 所有浏览器 */    *word-spacing:-1px;/* 使用word-spacing 修复 IE6、7 中始终存在的 1px 空隙，减少单词间的空白（即字间隔） */ } .span-wrap span{
        font-size: 12px;    letter-spacing: normal;/* 设置字母、字间距为0 */    word-spacing: normal; /* 设置单词、字段间距为0 */ }

有些同学会问为什么要这么复杂，干脆直接使用浮动，简单，也不用写多余的hack，多好。

不可否认，使用浮动技术是比较好的办法，实际工作中我们使用浮动也是比较多，但是也并不是每处地方都要使用浮动，而且使用浮动后还需要清除浮动的操作。

工作中，我们可不断尝试使用”新办法“来解决问题，保持追求”时尚“的精神，不断丰富的知识面。好的代码也方便更好的团队合作，也是体现自己能力的一项指标。

作者：白树

出处：