alignment box for inline-block non-replaced elements

Question

Please run the demo:

* {
  margin: 0;
  padding: 0;
}

.body {
  font-family: Microsoft Yahei;
  font-size: 16px;
  background-color: lightblue;
  height: 400px;
  width: 400px;
  line-height: 2;
  vertical-align: baseline;
}

.body span {
  background-color: pink;
}

.body .inline-block {
  display: inline-block;
  background: orange;
  height: 50px;
}

.inline-block.text {
  vertical-align: text-top;
}

<div class="body">
  <span>
words-g words words-g
  <span class="inline-block text">with inline-block box child</span> words-g w
  </span>
</div>

The point is that I set

.inline-block.text {
  vertical-align: text-top;
}

According to the specification:

In the following definitions, for inline non-replaced elements, the box used for alignment is the box whose height is the 'line-height' (containing the box's glyphs and the half-leading on each side, see above). For all other elements, the box used for alignment is the margin box.

and in the section 'line-height':

On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut." (The name is inspired by TeX.).

So,in this case,.inline-block.textis a

• block container element whose content is composed of inline-level elements
• whose height is 50px and line-height is 32px
• also is an inline non-replaced elements

And here is my question:

the box used for alignment is the box whose height is the 'line-height'

1. What is the above box point at in this case for .inline-block.text?

As the demo shows,I think it is the box with height 50px. However,the box's height is not the line-height which conflicts with the specification above. So,I was confused and don't understand the above sentence in the specification.

2. And if you think the above box is the box with height 50px,how do you explain the fact that height 50px is not the line-height 32px?

Please notice:

• I just want to understand this sentence which is the box used for alignment is the box whose height is the 'line-height',so I can understand the vertical-align better.

• I am not asking for a specific solution.

Whatever thanks for your help!

Answer 1

The statement

for inline non-replaced elements, the box used for alignment is the box whose height is the 'line-height'

does not apply to inline-blocks. Inline-blocks are not inline elements. Inline elements are elements with display: inline, and generate inline boxes. Inline-blocks are not inline boxes, but inline-level (the "-level" part is important!) block container boxes. Therefore, the statement

For all other elements, the box used for alignment is the margin box.

applies instead, which results in vertical-align: text-top causing the top outer edge of the inline-block to align with the top of the line box.

Any part of the specification that is said to apply to inline elements does not apply to inline-blocks.