行内元素水平间隔有关问题

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

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

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

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

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

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

经过测试后，可发现设置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">    <span>字符产生间距</span>    <span>字符产生间距</span>    <span>字符产生间距</span>    <span>字符产生间距</span>    <span>字符产生间距</span>    <span>字符产生间距</span></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 */ }

当然，除了上述方法，还有让内联元素浮动【我试的是float：left;】的办法，此时父级容器需要设置宽高，才好定位内联元素的位置。