It seems that the positioning of text within divs plays a role in how they align on the page, regardless of other factors.
By default, text placed inside a div is aligned to the top-left corner, causing empty divs to line up horizontally next to each other (inline-block) and push the content downward. Adding more divs with varying heights further extends this downward expansion, as demonstrated below:
<h1>Empty div</h1>
Some text
<div style="height:20px;"></div>
<div style="height:40px;"></div>
<div style="height:60px;"></div>
<div style="height:80px;"></div>
continuing here
<h2>Div with text</h2>
Some text
<div style="height:20px;">20</div>
<div style="height:40px;">40</div>
<div style="height:60px;">60</div>
<div style="height:80px;">80</div>
continuing here
...
div {
display: inline-block;
margin-right: 2px;
width: 20px;
background-color: red;
}
Fiddle
In the provided Fiddle example, you can observe how the text line serves as a reference point for alignment.
This behavior may be attributed to divs adjusting their alignment based on the presence or absence of text content. When text is present, they align with surrounding text; otherwise, they align along their bottom edge.
I hope my explanation makes sense, even if it's not very clear. Thank you for considering my perspective.