Now, if i apply 'vertical-align' to the second line-box, it moves without a problem, since there is plenty of space. However, obviously there is no space for the first line-box to move up or down, but when i apply vertical-align to it, the second line-box moves almost as if the vertical align properties applies to it.
Your missunderstanding is in the plenty of space or let's say space in general. Vertical align will not consider the space you have in mind but will create that space.
let's first understand the definition
This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element. ref
Then you can read the following rules:
The height of a line box is determined as follows:
The height of each inline-level box in the line box is calculated. For replaced elements, inline-block elements, and inline-table elements, this is the height of their margin box; for inline boxes, this is their 'line-height'.
The inline-level boxes are aligned vertically according to their 'vertical-align' property. In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.1 does not define the position of the line box's baseline (i.e., the position of the strut, see below).
The line box height is the distance between the uppermost box top and the lowermost box bottom.
We first start by defining the height of each element and we consider the margin box then we place all the elements and only at end the line box height is defined (the spaces you are talking about).
In your first example, both element have a default baseline alignment
Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.
so both will get aligned by their text and logically the margin of any of them will push the other.
A better example with different fonts:
.container {
border: 1px solid;
background:linear-gradient(blue,blue) 0 78px/100% 2px no-repeat;
}
.first {
display: inline-block;
font-size: 30px;
background-color: darkcyan;
border: 1px solid;
margin: 50px 0 0 0;
opacity:0.5;
}
.second {
display: inline-block;
border: 1px solid;
background-color: red;
font-size: 50px;
margin:0;
opacity:0.5;
}
<div class="container">
text outside
<div class="first">Lorem ipsum</div>
<p class="second">Lorem ipsum</p>
</div>
As you can see we have an alignment by text and after we made the alignment we place our element and we should respect the margin. Imagine that you need to first glue both element sconsidering their text then you need to place the whole puzzle inside.
Now if you apply vertical-align:top to your first element and you keep baseline (the default one) for the other you will have:
Align the top of the aligned subtree with the top of the line box
Our element need to be aligned to the top considering its margin box AND will no more participate to the baseline alignment so the other element will no more follow the first one. It's like we fired the first element for the baseline group since now it will be using the top alignment thus we get the following
.container {
border: 1px solid;
background:linear-gradient(blue,blue) 0 48px/100% 2px no-repeat;
}
.first {
display: inline-block;
font-size: 30px;
background-color: darkcyan;
opacity:0.5;
border: 1px solid;
margin: 60px 0 0 0;
vertical-align:top;
}
.second {
display: inline-block;
border: 1px solid;
background-color: red;
font-size: 50px;
margin:0;
opacity:0.5;
}
<div class="container">
text outside
<div class="first">Lorem ipsum</div>
<p class="second">Lorem ipsum</p>
</div>
with different font-size to better see the trick:
.container {
border: 1px solid;
background:linear-gradient(blue,blue) 0 48px/100% 2px no-repeat;
font-size: 50px;
}
.first {
display: inline-block;
font-size: 30px;
background-color: darkcyan;
opacity:0.5;
border: 1px solid;
margin: 60px 0 0 0;
vertical-align:top;
}
.second {
display: inline-block;
border: 1px solid;
background-color: red;
font-size: 20px;
margin:0;
opacity:0.5;
}
<div class="container">
text outside
<div class="first">Lorem ipsum</div>
<p class="second">Lorem ipsum</p>
</div>
So it's not about enough space or not but how to place element considering other elements. In this last case, the first element is set alone at the top (we are done with it). The second element will be set to the baseline alignment and we only have the outside text that will follow it. The margin of the first one will have no effect since it's no more considered in the baseline alignment.
Some related question for more details and examples:
Vertical-align aligns everything else except self
https://stackoverflow.com/a/54190413/8620333
Why is the descender “created” when baseline is set to vertical-align?
Why does vertical-align: text-top make element go down?
