如何移除inline-block元素之间的空白

我们想要的是<li>元素可以紧贴在一起，但是很显然，结果“出乎意料”。那么有什么方法可以让结果符合我们的预期呢？所能想到的解决方法至少有以下四种，而每种方法也都有其优劣所在，至于要如何选择，就需要取决于实际情况。

方法一：删除空格

之所以有空白，是因为元素之间存在空格（连续多个空格、换行符、制表符在HTML中都认为是一个空格），那么最简单的方式，就是删除空格。简单，但是格式有点...不太好看。

<ul>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>

或者

<ul>
    <li>Item 1</li
    ><li>Item 2</li
    ><li>Item 3</li>
</ul>

或者

<ul>
  <li>item 1</li><!--
  --><li>item 2</li><!--
  --><li>item 3</li>
</ul>

或者

<ul>
    <li>Item 1
    <li>Item 2
    <li>Item 3
</ul>

方法二：将字号设置为0

一个空格，如果它的font-size是0，那么它的width也就是0，所以空白也就不存在了。但是缺点是子节点会继承父节点属性，所以<li>的font-size也被置为0了，为了让<li>显示出来，需要在<li>上单独设置font-size。

ul {
  font-size: 0;
}
li {
  font-size: 30px;
}

方法三：设置为float

当一个元素的float不是none时，这个元素相当于一个block元素，所以这种inline-block之间的空白问题，也就不存在了，但是注意，需要在父元素上清楚浮动，否则会影响其他元素的布局。

ul {
  overflow: hidden;
}
li {
  float: left;  
}

方法四：使用flexbox进行布局

相对来说比较推荐的做法，但是需要注意当前项目需要支持的浏览器，是否支持flexbox布局。