這篇文章主要為大家詳細(xì)介紹了快速去掉HTML中Inline-Block空白的5種方法，感興趣的小伙伴們可以參考一下

當(dāng)需要在”inline”元素上控制margin和padding時(shí)，inline-block屬性值變得非常有用，有了它，你不在需要讓這些元素去“block”和“float”。但有一個(gè)問(wèn)題，當(dāng)使用inline-block時(shí)，HTML元素之間的空白會(huì)顯示在頁(yè)面上。很討厭。有幾種方法可以除去這些空白；其中一個(gè)非常巧妙。

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

一個(gè)100%能解決這個(gè)問(wèn)題的方法是在你的HTML代碼里元素間不留任何空白：

CSS Code

<ul>   

<li>Item content</li>   

<li>Item content</li>   

<li>Item content</li>   

</ul>   

當(dāng)然，這樣看起來(lái)很亂，讓代碼不好維護(hù)，但很實(shí)用，很直觀，更重要的……很可靠。

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

解決這個(gè)空白問(wèn)題最好的方案是在這些inline-block元素的父元素上設(shè)置font-size: 0。如果你的<UL>里有inline-block的<LI>，那你可以這樣做：

XML/HTML Code

.inline-block-list { /* ul or ol with this class */   

 font-size: 0;   

}   

.inline-block-list li {   

 font-size: 14px; /* put the font-size back */   

}   

為了不讓父元素的字體大小影響子元素，你需要重新在子元素上設(shè)置font-size值，這通常很簡(jiǎn)單。唯一可能遇到麻煩的情況是你用相對(duì)大小設(shè)置字體。但大多數(shù)時(shí)候，這樣的方法能解決你的問(wèn)題。

方法3：HTML注釋

這種方法有點(diǎn)暴力，但同樣能奏效。將HTML元素間用注釋填充，這跟它們之間沒(méi)有空白效果一樣：

XML/HTML Code

<ul>  

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

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

 --><li>Item content</li>  

</ul>  

用一個(gè)詞…惡心。用兩個(gè)詞…非常惡心。用三個(gè)詞….OK，你明白。但這確實(shí)管用！

方法4：負(fù)邊距

跟方法2很相似，抱歉。你可以利用inline-block的靈活性，給它們?cè)O(shè)置一個(gè)負(fù)邊距，隱藏空白：

XML/HTML Code

.inline-block-list li {   

 margin-left: -4px;   

}   

這種方法最不推薦，因?yàn)槟惚仨毧紤]到各種情況，有時(shí)候會(huì)出現(xiàn)一些無(wú)法預(yù)料的空白。最好不用這招。

方法5：首尾接龍

另外一個(gè)利用HTML標(biāo)記的方法是將元素的閉合標(biāo)記和下一個(gè)元素的開(kāi)始標(biāo)記靠在一起：

XML/HTML Code

<ul>  

 <li>Item content</li  

 ><li>Item content</li  

 ><li>Item content</li>  

</ul>  

并不像HTML注釋那樣丑陋，但我寧愿手工刪除那些空白，而不考慮代碼的可讀性。

沒(méi)有一個(gè)方法是非常理想的，但在網(wǎng)頁(yè)中不留空白也是一個(gè)爛方法。這并不是在警告你不要使用inline-block，inline-block仍然是非常的有用，只是在使用你要明白如何處理里面出現(xiàn)的空白。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助