inline-block元素之间怎么会有间隙？

先来看问题。很多时候当我们给一组块级元素设置display:inline-block样式的时候会发现每个块级元素之间有空隙。

inline-block元素之间的空隙
这组空隙到底是哪儿来的？为了防止误解我先贴出代码：

.inline-block {
    display: inline-block;
    margin: 0;
    width: 40px;
    height: 20px;
    color: white;
    background-color: darkcyan;
    text-align: center;
}

 <div class="inline-block">1</div>
 <div class="inline-block">2</div>
 <div class="inline-block">3</div>
 <div class="inline-block">4</div>

可以看出在css样式设置中并没有设置元素间的空隙。

我们稍作改变

.inline-block {
    display: inline-block;
    margin: 0;
    width: 40px;
    height: 20px;
    color: white;
    background-color: darkcyan;
    text-align: center;
}

 <div class="inline-block">1</div><div class="inline-block">2</div><div class="inline-block">3</div><div class="inline-block">4</div>

再看效果：

同样设置inline-block，缝隙没了

神奇的事情发生了，缝隙没了！

好了，先作一个不是很科学的总结，空隙主要是“换行”背锅，那就想几个办法“消除换行”。

• 写成如下样式

<div></div
><div></div
><div></div>

• 写在一行上

<div></div><div></div><div></div>

• 把中间的内容注释掉

<div></div><!--
--><div></div><!--
--><div></div>

再来几个复杂点的办法：

• 在父元素上设置空隙处字体大小font-size:0
• 使用负margin
• 看起来非主流的办法,无闭合标签

<div>
<div>
<div>
<div></div>

以上方法足够对付这个小bug了。那么这个bug究竟是怎么产生的呢？

上面已经说的很清楚了，这是“换行”或者“空格”在背锅。其实我们打“空格”或者“回车”换行都相当于键入了空白字符。想一下，我们在html中打一连串字然后突然“空格”一下是不是会有一个留白？好了，这样小bug的原因也很清晰了，以后遇到了就用上面的方法解决吧。