html - When I increase the line-height of inline-block or block-level element, why does the text inside remains centered in the middle?

Question

span {
    display:inline-block;
    background-color: red;
    line-height:100px;
    vertical-align: ;
}

  <span>Testing</span>

Answer 1

It's because increasing the line-height of an inline-block increases the 'strut' of its line-box, which increases the height of the line-box equally on both sides, top and bottom, which results in the anonymous inline-box holding the text inside the line-box to remain centered in the middle, as the baseline is pushed down.