怎樣去掉HTML中Inline-Block的空白

這篇“怎樣去掉HTML中Inline-Block的空白”文章，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“怎樣去掉HTML中Inline-Block的空白”，小編整理了以下知識點，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進入主題吧。

html是什么

html的全稱為超文本標記語言，它是一種標記語言，包含了一系列標簽．通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，主要和css+js配合使用并構建優雅的前端網頁。

當需要在”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。如果你的<UL>里有inline-block的<LI>，那你可以這樣做：

.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仍然是非常的有用，只是在使用你要明白如何處理里面出現的空白。

以上是“怎樣去掉HTML中Inline-Block的空白”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！