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骇客