【原】行內元素產生水平空隙是bug嗎

重構工程師們在設計代碼時，有喜歡手動刪除行內元素之間產生的額外空隙，並通過設置margin或padding來獲取想要間距嗎？如代碼：

<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>

然而刪除間距后，代碼堆成了一片，看得起很不舒服，特別是從重構轉給JS同事后，JS同事看完代碼后就會提出抱怨，代碼太亂，他們更希望看到的是這樣的代碼：

<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>

其實，給JS同事帶來的清晰的、方便閱讀和修改的代碼，也是重構工程師能力的體現。

 

了解行內元素產生水平間距的原因有助於我們解決這個問題，那么產生這些間距的原因是什么呢？

1.行內元素之間的“換行符”產生間距

<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>

展現效果如下：

2.行內元素之間使用“tab(制表符)”產生間距

<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>

展現效果如下：

3.行內元素之間使用“空格”產生間距

<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>

展現效果如下：

 

上以上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">
    <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 */
 }

有些同學會問為什么要這么復雜，干脆直接使用浮動，簡單，也不用寫多余的hack，多好。

不可否認，使用浮動技術是比較好的辦法，實際工作中我們使用浮動也是比較多，但是也並不是每處地方都要使用浮動，而且使用浮動后還需要清除浮動的操作。

工作中，我們可不斷嘗試使用”新辦法“來解決問題，保持追求”時尚“的精神，不斷豐富的知識面。好的代碼也方便更好的團隊合作，也是體現自己能力的一項指標。