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

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的时候看起来会别扭一些；若是非静态的数据推荐使用第二种方法。

来源：https://www.cnblogs.com/dpure/p/4610511.html