Why is the descender “created” when baseline is set to vertical-align? - css

Question

I know that the img element has a descender margin below it by default.
.box {
border: 1px solid;
}
<div class="box">
<img src="http://placehold.jp/150x150.png"> xyz
</div>
Question
I thought that the vertical-align property "aligns" elements at a specific position, so the height doesn't change. However, with the following code, when measuring the height when changing vertical-align, height was increased only forbaseline.
Why does it behave like "making a descender only when baseline"? Isn't a descender always present regardless of the value of the vertical-align property? There was no mention of this behavior in the vertical-align specification.
var align = ["top", "bottom", "baseline"];
var idx = 0;
function changeVerticalAlign() {
document.querySelector(".box>img").style.verticalAlign = align[idx];
document.querySelector("p").innerText = "height=" + getComputedStyle(document.querySelector(".box")).getPropertyValue("height") + ", vertical-align=" + getComputedStyle(document.querySelector(".box>img")).getPropertyValue("vertical-align");
idx < 2 ? ++idx : idx = 0;
}
document.querySelector("button").addEventListener("DOMContentLoaded", changeVerticalAlign);
document.querySelector("button").addEventListener("click", changeVerticalAlign);
.box {
border: 1px solid;
}
<div class="box">
<img src="http://placehold.jp/150x150.png"> xyz
</div>
<p></p>
<button>change vertical-align to "bottom"</button>

Answer 1

I thought that the vertical-align property "aligns" elements at a specific position, so the height doesn't change.
This isn't true because the height is defined after the alignment is done and you can clearly notice this if you use text instead of image:
.box{
border:1px solid;
margin:5px;
}
<div class="box">
<span>some text</span>
<span>some text</span>
<span>some text</span>
</div>
<div class="box">
<span style="vertical-align:super">some text</span>
<span>some text</span>
<span>some text</span>
</div>
<div class="box">
<span style="vertical-align:super">some text</span>
<span>some text</span>
<span style="vertical-align:sub">some text</span>
</div>
From the specification:
The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box.
and also
A line box is always tall enough for all of the boxes it contains. However, it may be taller than the tallest box it contains (if, for example, boxes are aligned so that baselines line up). When the height of a box B is less than the height of the line box containing it, the vertical alignment of B within the line box is determined by the 'vertical-align' property.
Then in another part of the specification
As described in the section on inline formatting contexts, user agents flow inline-level boxes into a vertical stack of line boxes. The height of a line box is determined as follows:
The height of each inline-level box in the line box is calculated. ....
The inline-level boxes are aligned vertically according to their 'vertical-align' property. ....
The line box height is the distance between the uppermost box top and the lowermost box bottom. (This includes the strut, as explained under 'line-height' below.)
So basically the height is defined bigger enough to hold the content after being aligned that's why the height may increase for some alignment.
If you add border to your elements you will notice the uppermost box top and the lowermost box bottom.
var align = ["top", "bottom", "baseline","super","sub","text-bottom","text-top"];
var idx = 0;
function changeVerticalAlign() {
document.querySelector(".box>img").style.verticalAlign = align[idx];
document.querySelector("p").innerText = "height=" + getComputedStyle(document.querySelector(".box")).getPropertyValue("height") + ", vertical-align=" + getComputedStyle(document.querySelector(".box>img")).getPropertyValue("vertical-align");
idx < 6 ? ++idx : idx = 0;
}
document.querySelector("button").addEventListener("DOMContentLoaded", changeVerticalAlign);
document.querySelector("button").addEventListener("click", changeVerticalAlign);
.box {
border: 1px solid;
}
.box> * {
border:1px solid red;
}
p {
margin:0;
}
<div class="box">
<img src="http://placehold.jp/150x130.png"> <span>xyz</span>
</div>
<p></p>
<button>change vertical-align</button>