行内块（inline-block）元素之间的空白

<nav class="nav-tab">
      <a>推荐</a>
      <a>排行榜</a>
      <a>搜索</a>
</nav>

.nav-tab a{
  display: inline-block;
  width: 30%;
  font-size:1rem;
  color:#bbb;
}

★ 行内块级元素之间在没有设置margin的情况下也会出现空白间隙。

出现空白间隙的原因是，元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal,合并多余空白），原来html代码中的回车换行被转成一个空白符，所以元素之间出现了空隙。这些元素之间的空隙会随字体的大小而变化。

 

如何消除空隙，有如下几种方法：

一、去除它们之间的空白

之所以有空隙，是因为这些元素之间留有空白（换行符、tab等）。可以通过将上一个元素的闭合标签和下一个元素的开始标签写在同一行，或者将两个inline-block元素之间加上空白注释，或不写元素的闭合标签等。。

二、父元素的font-size设置为零，子元素再单独设置字体大小

.nav-tab{
  font-size:0;
}

.nav-tab a{
  display: inline-block;
  width: 30%;
  font-size:1rem;
  color:#bbb;
}

三、用浮动（float）样式替代

四、用弹性盒布局（Flexbox）替代