<html>
<head>
<style type="text/css">li {display:inline-block;background-color: gray; padding: 10px 15px; }</style>
</head>
<body>
<ul style="list-style: none;">
<li><div style="width: 70px; height: 40px; background-color: pink;"></div></li>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
</ul>
</body>
</html>
The code above results in a misalignment:
I know it can be fixed with "vertical-align: top" or so set on inline-block elements, or by adding any content/text in the pink div:
But why adding text fixes alignment? Why does it affect parent's baseline? (if it does) Why doesn't other (elements') text affect parent's baseline? I tried making the pink div a 2nd item, and it still determines the (mis)alignment, so it's not the order of items that matters.
