去除inline-block之间的间隙

在使用 display: inline-block; 时，这些 inline-block 之间会有间隙，根据无双 - 《去除inline-block元素间的空隙》的说法，这个间隙是4px或者8px的距离（与浏览器有关），如果间隙是确定的，那根据这个我们就可以用CSS来避免这个间隙。根据之前的经验，也发现了可以通过改变HTML代码的结构来规避这个信息。

假设 <ul> 之间的 <li> 都是 inline-block ，最早我的做法是直接不换行，把所有标签连着写：

<ul>

  <li>这里是文字内容</li><li>这里是文字内容</li><li>这里是文字内容</li>

<ul>

这个方法虽然有效，但的确不算最“优雅”的办法，尤其在 <li> 有很多例如class之类的属性的时候会很大程度地影响阅读。

从HTML结构上入手

从上面可以看出规避 inline-block 间隙的办法就是使HTML元素之间本身没有间隙，于是问题的思路就清楚了，因为元素的标签分为开始标签和结束标签，只要使上一组 <li> 的结束标签紧挨着下一组 <li> 的开始标签，像这样 ...</li><li>... 就可以了，于是HTML结构还可以改成这样：

<ul>

  <li>这里是文字内容</li

  ><li>这里是文字内容</li

  ><li>这里是文字内容</li>

<ul>

<!--这样上一个元素的结束标签就是与下一个元素的开始标签紧挨着的了，浏览器会认为它们没有间隙-->

还可以写成这样：

<ul>

  <li>这里是文字内容</li><!--

  --><li>这里是文字内容</li><!--

  --><li>这里是文字内容</li>

<ul>

<!--利用注释来完成元素之间的连接，其实原理是一样的-->

也可以这样：

<ul>

  <li>

  这里是文字内容</li><li>

  这里是文字内容</li><li>

  这里是文字内容</li>

<ul>

<!--和这样：-->

<ul>

  <li>这里是文字内容

  </li><li>这里是文字内容

  </li><li>这里是文字内容</li>

<ul>

这些方法都是通过改变HTML结构来实现元素之间无间隙，本质都是一样的。我个人比较喜欢用的是第二种方法，只需要改变一个符号的位置就可以。

从CSS上入手

除了从HTML结构上入手外，根据上面说的间隙距离是固定的，此外，这个根本上还是属于样式问题，所以还可以从CSS上来解决这个间隙。CSS解决间隙的办法有这些：

采用负边距： 利用负边距来抵消间隙

ul li{

  display: inline-block;

  margin-right: -4px;

}

font-size： 把 inline-block 的父元素font-size设为0也可以，因为 <li> 被当作 inlie-block 处理，所以也有内联元素的性质，因此可以用处理内联元素的属性来处理这些 inlie-block

ul{

  font-size: 0;

  -webkit-text-size-adjust: none;

}

li{

  display: inline-block;

  font-size: 14px;

}

/*根据张鑫旭大神的文章，chrome浏览器会有默认最小字体大小，所以在这里要对chrome做单独的处理*/

letter-spacing和word-spacing： 原理同设置font-size相同。

ul{

  letter-spacing: -4px;

}

ul li{

  letter-spacing: 0;

}

/*以及word-spacing，这俩的原理是一样的*/

ul{

  word-spacing: -4px;

}

ul li{

  word-spacing: 0;

}

结语：以上是一些我暂时认为比较通用，不会造成更大影响的处理办法。当然还有各种各样的好的处理办法，还有时候会遇到一些特殊情况，那时候就需要具体情况，具体分析，具体解决了。

---

参考文章：

张鑫旭 - 《去除inline-block元素间间距的N种方法》

无双 - 《去除inline-block元素间的空隙》