至今我還記得年輕是在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; /* 設置具體的字體大小 */ ?} ?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> ?<ul> <li>Item content</li><!----><li>Item content</li><!----><li>Item content</li></ul>一個字來形容: 渣.如果用2個字來形容，那就是"渣渣",用3個字來形容,"解決了"。
解決方案3: 指定margin屬性值為負數和方案2類似，這個也比較渣。可以使用行內元素的margin屬性來抵消空白:ul.inline-block-list li { ?margin-left: -4px; ?} ?
ul.inline-block-list li { margin-left: -4px;}
這是最糟糕的解決方案了,因為你必須根據具體情況去計算,有時候還不對。你應該盡量避免這樣做。
雖然這些方案都不是很理想,但是如果不這樣處理，那你的HTML代碼結構可能就非常混亂，成為標準的垃圾代碼。因為行內元素非常好用,所以這并不是一個小心避免的雷區,作為開發人員,學會處理這種空白問題也是很重要的。

總結

以上是生活随笔為你收集整理的CSS清除行内元素之间的HTML空白的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。