先来看问题。很多时候当我们给一组块级元素设置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的原因也很清晰了，以后遇到了就用上面的方法解决吧。
