Could someone explain why a div with display: inline-block aligns differently when there is text or another element inside it? I know that vertical-align can fix this issue, but I'm curious to understand how the browser makes its decision on how to display the content.
div {
width: 100px;
height: 100px;
background: #dd6b4d;
display: inline-block;
/* vertical-align: top; */
}
.inner {
width: 50px;
height: 50px;
background: green;
}
<html>
<body>
<div></div>
<div>aaa</div>
<div>
<div class="inner"></div>
</div>
</body>
</html>