Is this a bug in CSS? [duplicate] - html

Question

This question already has answers here:
Why my inline-block divs are not aligned when only one of them has text? [duplicate]
(4 answers)
Why does this inline-block element have content that is not vertically aligned
(4 answers)
My inline-block elements are not lining up properly
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Understand inline-element, vertical-align, line-box and line-height
(1 answer)
Closed 4 years ago.
This might sound like an outdated topic since no one still uses inline-block property thanks to flex-box and grid but I was wondering about it and I would like to inquire about it.
When creating two divs and assigning them both to display as inline-block and then adding any element inside one of them, the result is quite strange, where the div which contains that element will slide down to the bottom of the other div minus the height of the added element.
div {
display: inline-block;
width: 100px;
height: 150px;
background: gray;
}
<div id="left">
<span>Text</span>
</div>
<div id="right"></div>
To fix the issue it's only enough to align the div vertically to the top, but what is strange too is that we get the same result even if we align the other div which is not affected without aligning the affected one, so what exactly is happening here?
div {
display: inline-block;
width: 100px;
height: 150px;
background: gray;
}
#left{
vertical-align: baseline;
}
#right{
vertical-align: top;
}
<div id="left">
<span>text</span>
</div>
<div id="right"></div>
UPDATE:
To clarify things more I removed the child element and added a text outside the two divs, and added two more divs, now all divs are without a flow content, but the first two both of them have a top property while the last two are different, one top and the other is baseline:
div {
display: inline-block;
width: 100px;
height: 150px;
background: gray;
}
.right{
vertical-align:baseline;
}
.left{
vertical-align:top;
}
Text
<div class="right"></div>
<div class="left"></div>
<br>
Text
<div class="left"></div>
<div class="left"></div>
In the first case the Text aligned to the top and in the next aligned to the baseline of the divs even they don't have a flow content.

Answer 1

The reason this happens, is because the default vertical-align value for inline elements is baseline.
Then the question becomes: what is the baseline of an inline-block element? Here, we have to make a distinction between elements with and without flow content:
For elements with flow content, such as the left div in your question, the baseline is the same as the baseline of the last content element.(*) For the left div, this corresponds to the baseline of the inner span.
(*) There are some additional considerations when setting the element's overflow, but I'll leave that out of scope.
For elements without flow content, such as the right div in your question, the baseline is the bottom of the element's margin box. For the right div, this corresponds to the bottom of the div itself.
So, to summarize: the reason you're seeing a vertical shift is because the elements are vertically aligned according to their baseline, and the baselines for elements with and without content are calculated differently.
To test this out, just try adding some text to the right div, and you'll see how both baselines are now the same.
div {
display: inline-block;
width: 100px;
height: 100px;
background: gray;
}
<div id="left">Text</div>
<div id="right">Other text</div>
By animating the font size, the example below demonstrates even more clearly how changes in the baseline affect vertical positioning:
div {
display: inline-block;
width: 100px;
height: 100px;
background: gray;
}
#left {
transition: all 2s ease;
animation: anim 2s infinite linear alternate;
}
#keyframes anim {
0% {font-size: 100%;}
100% {font-size: 300%;}
}
<div id="left">Text</div>
<div id="right"></div>

Answer 2

The display: inline-block Value
Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.
Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.
Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.
and
excuse me textarea is inline-block, but what line is correct,
the browser think the bottom of second inline-block is position of line so
when he go to draw children he see the textarea must be inline and change position of it to the bottom of second inline-block is position of line and because it is any padding and it position are relative it cause to parent div move to bottom just for textarea be inline