行內塊(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類似，這個也比較渣。可以使用行內元素的margin屬性來抵消空白:
復制代碼
代碼如下:
ul.inline-block-list li {
margin-left: -4px;
}
這是最糟糕的解決方案了,因為你必須根據具體情況去計算,有時候還不對。你應該盡量避免這樣做。
雖然這些方案都不是很理想,但是如果不這樣處理，那你的HTML代碼結構可能就非常混亂，成為標准的垃圾代碼。
因為行內元素非常好用,所以這並不是一個小心避免的雷區,作為開發人員,學會處理這種空白問題也是很重要的。