My question focus on the parent box of vertical-aligned elements,it is totally different from the post https://stackoverflow.com/questions/43996242/whats-the-deal-with-vertical-align-baseline,the description in w3c is obscure for the concept parent box.
In the manual w3c .
definition on vertical-align
baseline
Align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom of the box with the parent's baseline.
Let's take a real simple example.
.parent{width:200px;height:100px;border:1px solid red;}
.foo {
vertical-align: baseline;
height: 50px;
width: 50px;
display: inline-block;
background-color: plum;
position: relative;
}<div class="parent">
<span>the quick brown fox</span>
<div class="foo">
</div>
<span>jump over the lazy dog.</span>
</div>What is the div.foo's parent box?
It is div.parent?
How to line out all the attributions:baseline,sub,super,text-top,text-bottom,top,bottom,middle for div.parent such as below?
I found some contradictions here.
All the vertical-align attributions:baseline,sub,super,text-top,text-bottom,top,bottom,middle applied to inline-level and table-cell elements.
div.parent is a block box,no such concepts as baseline,sub,super,text-top,text-bottom,top,bottom,middle for it.
Then how to say Align the baseline of the box with the baseline of the parent box?
The parent box has no baseline attribution at all.
