行內元素之間產生水平間隙的原因及解決方案

1. 行內元素之間產生水平空隙的原因：代碼中有意或無意的添加了換行符，tab（制表符）或者空格等字符引起的；

2. 解決方案：

• 刪除引起問題的換行符，制表符或者空格等，但是缺點是會使代碼結構混亂；
• 設置margin屬性為負數，如：margin-left: -3px;缺點是負數的值不確定，得具體情況具體分析，不推薦；
• 在行內元素之間添加HTML注釋注釋符號；<!---->　

  <div>
      <span>行內元素</span><!--
      --><span>行內元素</span><!--
      --><span>行內元素</span><!--
      --><span>行內元素</span>
  </div>

  缺點是這樣寫會增加代碼量，代碼結構也會受影響；

  
  
• 設置font-size: 0; 用於消除換行符、tab（制表符）、空格等字符造成的影響，但需注意以下幾點：

　　　　1. IE6，IE7瀏覽器當設置font-size：0時，換行符、tab（制表符）、空格始終存在1px的空隙；

　　　　2. 最新版本的Safari瀏覽器，Chrome瀏覽器不支持font-size: 0;；

　　　解決方法如下：

　　　　1. 針對IE6、7瀏覽器，使用word-spacing 修復 IE6、7 中始終存在的 1px 空隙，減少單詞間的空白（即字間隔），即： word-spacing:-1px;

　　　　2. 使用webkit的私有屬性，讓字體大小不受設備終端的調整，可定義字體大小小於12px, html{-webkit-text-size-adjust:none;}

　　　css代碼如下：

html{
    -webkit-text-size-adjust: none;/* 使用webkit的私有屬性，讓字體大小不受設備終端的調整，可定義字體大小小於12px */
}
div {
    font-size: 0;/* 所有瀏覽器 */
    *word-spacing: -1px;/* 使用word-spacing 修復 IE6、7 中始終存在的 1px 空隙，減少單詞間的空白（即字間隔） */
 }
span {
    font-size: 12px;
    letter-spacing: normal;/* 設置字母、字間距為0 */
    word-spacing: normal; /* 設置單詞、字段間距為0 */
 }