這篇文章主要為大家詳細介紹了快速去掉HTML中Inline-Block空白的5種方法，感興趣的小伙伴們可以參考一下
當需要在”inline”元素上控制margin和padding時，inline-block屬性值變得非常有用，有了它，你不在需要讓這些元素去「block」和「float」。但有一個問題，當使用inline-block時，HTML元素之間的空白會顯示在頁面上。很討厭。有幾種方法可以除去這些空白；其中一個非常巧妙。
方法1：各元素間不留任何空白
#一個100%能解決這個問題的方法是在你的HTML程式碼裡元素間不留任何空白：
<ul> <li>Item content</li> <li>Item content</li> <li>Item content</li> </ul>
當然，這樣看起來很亂，讓程式碼不好維護，但很實用，很直觀，更重要的…很可靠。
方法2：在父元素上設定font-size: 0
解決這個空白問題最好的方案是在在這些inline-block元素的父元素上設定font-size: 0。如果你的
.inline-block-list { /* ul or ol with this class */
font-size: 0;
}
.inline-block-list li {
font-size: 14px; /* put the font-size back */
}為了不讓父親元素的字體大小影響子元素，你需要重新在子元素上設定font-size值，這通常很簡單。唯一可能遇到麻煩的情況是你用相對大小設定字體。但大多數時候，這樣的方法能解決你的問題。
方法3：HTML註解
這種方法有點暴力，但同樣能奏效。將HTML元素間用註解填充，這跟它們之間沒有空白效果一樣：
<ul> <li>Item content</li><!-- --><li>Item content</li><!-- --><li>Item content</li> </ul>
用一個字…噁心。用兩個字…非常噁心。用三個字….OK，你明白。但這確實管用！
方法4：負邊距
#跟方法2很相似，抱歉。你可以利用inline-block的彈性，為它們設定一個負邊距，隱藏空白：
.inline-block-list li {
margin-left: -4px;
}這個方法最不推薦，因為你必須考慮到各種情況，有時會出現一些無法預料的空白。最好不用這招。
方法5：首尾接龍
另一個利用HTML標記的方法是將元素的閉合標記和下一個元素的開始標記靠在一起：
<ul> <li>Item content</li ><li>Item content</li ><li>Item content</li> </ul>
不像HTML註解那麼醜陋，但我寧願手工刪除那些空白，而不考慮程式碼的可讀性。
沒有一個方法是很理想的，但在網頁中不留空白也是一個爛方法。這並不是警告你不要使用inline-block，inline-block仍然是非常的有用，只是在使用你要明白如何處理裡面出現的空白。
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
以上是去掉HTML中Inline-Block的空白的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
