清除行內元素之間HTML空白的幾種解決方案

2020-03-24 16:05:52

字體：大中小

來源：轉載

供稿：網友

至今我還記得年輕是在IE6上開發的那些苦逼日子,特別希望IE瀏覽器采用 inline-block 的顯示方式.
行內塊(inline-block)是非常有用的,特別是想要不用'block'和'float'來控制這些行內元素的margin,padding之時。
問題來了,HTML源碼中行內元素之間的空白有時候顯示在屏幕上那是相當的討厭。
當然,有一些技巧(方法)可以用來清除他們:比如粗暴地完全刪除空白,或者其他的方法:

解決方案1: font-size:0;
最好的方法是在外層元素上設置font-size:0;同時在內層元素上指定字體具體的大小。

復制代碼代碼如下:
ul.inline-block-list { /* 比如 ul 或者 ol元素 */
font-size: 0;
}
ul.inline-block-list li {
font-size: 14px; /* 設置具體的字體大小 */
}

為了抵消外層元素的字體屬性,在內層元素必須指定 font-size 屬性，當然這很簡單。
假若代碼是一種復雜的嵌套關系，那么你可能不好去計算或指定這些字體屬性,但在大多數情況下,這就是你想要的效果！

解決方案2: HTML 注釋
這種方法比較渣,但是效果也不錯。使用HTML的注釋標記頂替元素之間的空白:

復制代碼代碼如下:
ul
li Item content /li !--
-- li Item content /li !--
-- li Item content /li
/ul

一個字來形容: 渣.如果用2個字來形容，那就是渣渣 ,用3個字來形容, 解決了。

解決方案3: 指定margin屬性值為負數
和方案2類似，這個也比較渣?？梢允褂眯袃仍氐膍argin屬性來抵消空白:

復制代碼代碼如下:
ul.inline-block-list li {
margin-left: -4px;
}

這是最糟糕的解決方案了,因為你必須根據具體情況去計算,有時候還不對。你應該盡量避免這樣做。

雖然這些方案都不是很理想,但是如果不這樣處理，那你的HTML代碼結構可能就非?；靵y，成為標準的垃圾代碼。
因為行內元素非常好用,所以這并不是一個小心避免的雷區,作為開發人員,學會處理這種空白問題也是很重要的。更多編程語言

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：批量下載對路網圖片并生成html的實現方法

下一篇：淺析JQuery中的html(),text(),val()區別