5種方法去掉HTML中Inline-Block元素之間的空白

園子開通有2個月了，一直沒有下來寫文，這兩個月來我經歷了多個項目的摧殘以及………………

好吧~我認可是我本身懶。

做爲園子的第一篇文章怎麼也要上點乾貨，就算不是乾貨怎麼也得放點有用的東西。不過，考慮到鄙人那點有限的水平，也淘不出什麼乾貨來。因而我就找到了當年收藏的一篇文章，添加了一些本身的理解後發了出來，但願能給你們有借鑑的地方。

下面進入正題：

display: inline-block 是個很好用的樣式，當你須要多個塊狀元素在同一行時你的第一反應就是它。有了它，你不在須要讓這些元素去「block」和「float」，而後再去處理因爲「float」引發的佈局問題。但有一個問題，當使用inline-block時，HTML元素之間的空白會顯示在頁面上，這讓咱們控制樣式的時候很難處理，下面我就介紹5個方法來幹掉他。

 

方法1：各元素間不留任何空白

一個100%能解決這個問題的方法是在你的HTML代碼裏元素間不留任何空白：

<ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>

固然，這樣看起來很亂，讓代碼很差維護，但很實用，很直觀，更重要的……很可靠。

這裏提一下，咱們在手寫HTML的時候添加換行以及縮進是爲了讓它們看起來更清晰，當後臺的小夥伴們經過動態模板輸出的時候，它們是就是上面那個鬼樣子，這就是爲何有些時候真實的項目中和咱們本身的靜態文件效果有出入的緣由。

 

方法2：在父元素上設置font-size: 0

解決這個空白問題最好的方案是在這些inline-block元素的父元素上設置font-size: 0。若是你的<UL>裏有inline-block的<LI>，那你能夠這樣作：

.inline-block-list { 
    font-size: 0; /* ul or ol with this class */
}

.inline-block-list li {
    font-size: 14px;  /* put the font-size back */
}

爲了避免讓父元素的字體大小影響子元素，你須要從新在子元素上設置font-size值，這一般很簡單。惟一可能遇到麻煩的狀況是你用相對大小設置字體。但大多數時候，這樣的方法能解決你的問題，如何你的子元素內沒有任何文字，那麼這種方法更是你的上上之選。

 

方法3：負邊距

.inline-block-list li {
    margin-left: -4px;
}

這種方法最不推薦，由於你必須考慮到各類狀況，有時候會出現一些沒法預料的空白或覆蓋。這裏只是單純的陳述一種解決方案，最好不用這招。

 

方法4：首尾接龍

<ul>
    <li>Item content</li
 ><li>Item content</li
 ><li>Item content</li>
</ul>

方法5：HTML註釋

<ul>
    <li>Item content</li><!--
 --><li>Item content</li><!--
 --><li>Item content</li>
</ul>

後面這2種方法原理其實和第一種方法相似，本人尊重原做者，就一併引用過來了，這裏就再也不作討論了。

 

總結

基於第一種方法，若是元素是動態的數據，那麼咱們能夠徹底無視該影響，固然咱們本身在調試靜態HTML的時候看起來會彆扭一些；如果非靜態的數據推薦使用第二種方法。

好了園子的處子文算是結束了，就我本身看來都是慘不忍睹，不過相信之後會好的，就這樣吧

 

對了原文內容引自web駭客