html左侧空隙若何处置html中内联元素之间程度闲暇

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

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

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

html左侧空隙若何处置html中内联元素之间程度闲暇 Ruby

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

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

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

展现效果如下：

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

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

展现效果如下：

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，多好。
的确利用浮动技能是比较好的办法，实际事情中我们利用浮动也是比较多，但是也并不是每处地方都要利用浮动，而且利用浮动后还须要打消浮动的操作。

文/丁向明

做一个有博客的web前端自媒体人，专注web前端开拓，关注用户体验，加我qq/微信互换：6135833

http://dingxiangming.com