行內元素空白消除
轉載自:奇舞週刊
相信大家應該都遇到過下面這個問題：“HTML原始碼中行內元素之間的空白顯示在了螢幕上”。可能大家都有自己的小技巧來消除這些意料之外的空白。但是方法有很多，有時候不能滿足於一種方法，不同的方法適合於不同的場景。就像我之前一直用的方法，今天總結了之後才發現還有更好的方法。廢話不多說，接下來我給大家總結一下消除行內元素HTML原始碼空白的小技巧。
下文中以一個div中的兩個span標籤為例。我們將兩個div內的兩個span設為display:inline-block;width:50%;，會發現兩個span元素並沒有在同一行，這就是原始碼中的空白導致的。
示例圖與程式碼如下：
HTML：
<div class="Resolve">
<span>左側行內元素</span>
<span>右側行內元素</span>
</div>
CSS：
.Resolve {
width: 90%;
border: 1px solid #dd4b39;
color: white;
}
.Resolve span {
display:inline-block;
width: 50%;
}
.Resolve span:first-child {
height: 40px;
background: #37b8ea;
}
.Resolve span:last-child {
height: 30px;
background: #5cb767;
}
方案1：原始碼中直接就寫成一行
相信大家看到這個解決方案的時候，會想這不是廢話嘛。有時候我們就是為了程式碼的美觀，才將兩個span標籤分兩行顯示的，寫在一行根本就沒解決問題好不好？
不過，我覺得這並不是廢話，之所以將其列為一種解決方案，是防止有的人不知道是什麼原因導致的空白的顯示。知道了這個原因，如果兩個行內元素的橫向寬度(此處指程式碼寬度)不大，寫在一行也算是最快最直接的解決方法。
示例圖與程式碼如下：
HTML：
<div class="Resolve Resolve1">
<span>左側行內元素</span><span>右側行內元素</span>
</div>
方案2：font-size: 0;
問題中span標籤之間的空白是因為換行符/Tab製表符/空格等產生的間隔，並且據筆者測試，得出這個距離是字型大小的1/3倍（請先記住這個值）。那麼既然空格和字型大小font-size相關。那麼也可以通過字型大小來消除這個空隙。
在父級元素上設定font-size: 0;，然後再在內部的span設定需要的字型大小即可。
示例圖與程式碼如下：
HTML：
<div class="Resolve Resolve2">
<span>左側行內元素</span>
<span>右側行內元素</span>
</div>
CSS：
.Resolve2 {
font-size: 0;
}
.Resolve2 span {
font-size: 14px;
}
這種情況在內部的行內元素字型大小比較統一時，處理起來較為方便，但如果包含的行內元素中存在多種字型大小，需要一一指定，較為繁瑣。不過往往這種時候內部的多種字型大小也是單獨指定。可以根據具體場景決定是否使用該方案。
方案3：margin-left設為負值
如果行內元素為塊級行內元素，則可以使用margin屬性來抵消空白。在【解決方案2】中有提到行內元素之間的距離是字型大小的1/3倍。所以我們只需要將第二個span元素的margin-left設定為-0.333333em即可。
示例圖與程式碼如下：
HTML：
<div class="Resolve Resolve3">
<span>左側行內元素</span>
<span>右側行內元素</span>
</div>
CSS：
.Resolve3 span:last-child {
margin-left: -0.333333em;
}
不過從上面可以看出，最右邊還會存在一點點的白邊誤差。這是由於margin-left的計算精度導致的。所以為避免效果誤差，不建議使用該方法。
方案4：letter-spacing設定為負值
同方案2、方案3，我們還可以通過letter-spacing改變行內元素之間空隙的大小，將letter-spacing設為-0.333333em即可。但是與font-size一樣，改變letter-spacing時會改變內部子元素的間隙，需要在子元素內手動進行矯正。
示例圖與程式碼如下：
HTML：
<div class="Resolve Resolve4">
<span>左側行內元素</span>
<span>右側行內元素</span>
</div>
CSS：
.Resolve4 {
letter-spacing: -0.333333em;
}
.Resolve4 span {
letter-spacing: 0;
}
方案5：HTML註釋（推薦使用）
除了調整css樣式之外，我們可以使用html註釋來抵消空格，這種情況下不用額外進行css處理。此外筆者覺得還有一個好處，可以加上文字註釋，告知為什麼會加入註釋。
推薦使用該方式，能夠有效保持程式碼整齊，並且不用額外新增css樣式。
示例圖與程式碼如下：
HTML：
<div class="Resolve Resolve5">
<span>左側行內元素</span><!-- 消除行內元素換行導致的空白
--><span>右側行內元素</span>
</div>
總結
以上就是消除行內元素間HTML空白的5種方案，雖然這些方案都不是很理想，但是有時候在特定的情況下，我們往往需要其中之一作為解決方案。