font-size = 0 的作用

问题的根源是 inline（a标签默认是display:inline） 和 inline-block (.list 设置的是 display:inline-block) 是内联布局，既然是内联那么就会受空白区域的影响。

这是像素级还原设计稿很有用的设置，因为元素节点有文本节点，在缩进代码时会占据宽度，这么说不好理解，演示如下：

HTML

<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

CSS

.box{
  width: 90px;
  height: 60px;
  border: 1px solid #ccc;
}
.box div{
  display: inline-block;
  box-sizing: border-box;
  font-size: 14px;
  width: 30px;
  border: 1px solid ;
}

理论上box下面的三个div都是30px，刚好在一行显示，但是实际效果是这样的：

这就是上文说到的原因，我们在box下添加 font-size:0; 再看看效果：

总结：

1、可以看到这才是我们想要的结果，因此在实际开发中，为了更好的还原设计稿，在父元素很有必要设置font-size:0，避免莫名其妙的间距。

2、这种情况的另一种解决方式：去掉空白部分。（不采用，例子如下：）

<div class="box"><div>1</div><div>2</div><div>3</div></div>