<span class="a">111</span>
  <span class="b"></span>
div {
  font-size: 20px;
  line-height: 60px;
  border: 1px solid #000;
  background: pink;
.b {
  display: inline-block;
  line-height: 10px;
  width: 100%;
  height: 0;


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.
This value causes an element to generate one or more inline boxes.

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