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

转载：https://www.cnblogs.com/dpure/p/4610511.html

方法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>