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

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;
}

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-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.