Inline-block没有内容时，仍有高度

如下图，第二个line-block的span没有内容，但是div的高度是120px
demo: https://codepen.io/GitKou/pen/qNxNxj

<div>
  <span class="a">111</span>
  <span class="b"></span>
</div>

div {
  font-size: 20px;
  line-height: 60px;
  border: 1px solid #000;
}
.a{
  background: pink;
}
.b {
  display: inline-block;
  line-height: 10px;
  width: 100%;
  height: 0;
}

为什么呢？
(来自 http://www.w3.org/TR/CSS2/visuren.html#inline-boxes)

inline-block
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
inline
This value causes an element to generate one or more inline boxes.

(来自 http://stackoverflow.com/questions/20106428/why-does-inline-block-cause-this-div-to-have-height)
> The most important part for this topic would be that the element itself get's formatted not just the content. Every inline-block element will be seen as atomic inline-level box and thus take up space.

关键点是这个inline-block元素本身会被formatted，而不仅仅是content。每个inline-block元素都会没看做line-level的box，他们在他们自己的inline formatting 上下文中被视为一个透明的box，所以会占据空间。对外层来说他是inline，所以外层div设置的font-size和line-height，对其高度有影响。

Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the ‘display’ property make an element inline-level: ‘inline’, ‘inline-table’, and ‘inline-block’. Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.

An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a ‘display’ value of ‘inline’ generates an inline box. Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box.