行內元素空白「消消樂」
- 2020 年 4 月 7 日
- 筆記
~歡迎點擊上方藍字「歪碼行空」快速關注~
前言
相信大家應該都遇到過下面這個問題：「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 種方案，其中第三第四種不太推薦使用，因為空白符的寬度跟字體相關，需要按照使用的字體進行調整，且計算有誤差。另外幾種方法不會有這個問題。
最後，雖然這些方案都不是很理想，但有時候在特定的情況下，我們往往需要其中之一作為解決方案。
