转载：如何处理html中内联元素之间水平空隙？

<div class=“”>去掉了间距去掉了间距去掉了间距去掉了间距去掉了间距去掉了间距</div>

这看起来很不舒服，特别扔给给JS同事后，JS同事看完代码后就会提出抱怨，代码太乱，他们希望的代码是如下：

<div class="">
换行符产生间距
换行符产生间距
换行符产生间距
换行符产生间距
换行符产生间距
换行符产生间距
</div>

那么有什么好的办法解决的？答案也是有的。

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

换行符产生间距
换行符产生间距
换行符产生间距
换行符产生间距
换行符产生间距
换行符产生间距
</div>

展现效果如下：

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

展现效果如下：

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

<div class="">换行符产生间距 换行符产生间距 换行符产生间距 换行符产生间距
换行符产生间距 换行符产生间距
</div>

展现效果如下：

上以上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;}

问题解决了，代码如下：

结构：

<div class="span-wrap">
字符产生间距
字符产生间距
字符产生间距
字符产生间距
字符产生间距
字符产生间距
</div>

样式：

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，多好。的确使用浮动技术是比较好的办法，实际工作中我们使用浮动也是比较多，但是也并不是每处地方都要使用浮动，而且使用浮动后还需要清除浮动的操作。span{float:left;}

出自http://dingxiangming.com