divcss清除行內元素之間HTML空白的方法

歡迎大家在這裡學習divcss清除行內元素之間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的注釋標記頂替元素之間的空白:

復制代碼代碼如下:

 

 

• Item content
• Item content
• Item content

 

 

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

解決方案3: 指定margin屬性值為負數和方案2類似，這個也比較渣。可以使用行內元素的margin屬性來抵消空白:

復制代碼代碼如下:

ul.inline-block-list li {

margin-left: -4px;

}

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

雖然這些方案都不是很理想,但是如果不這樣處理，那你的HTML代碼結構可能就非常混亂，成為標准的垃圾代碼。

因為行內元素非常好用,所以這並不是一個小心避免的雷區,作為開發人員,學會處理這種空白問題也是很重要的。

好了，divcss清除行內元素之間HTML空白內容就給大家介紹到這裡了。希望大家繼續關注我們的網站!

相關推薦：

css3進行截取替代js的substring的方法