这个问题在这里已有答案:
我想知道为什么当div中有文本或任何其他元素与display:inline-block时它的对齐方式不同?我知道vertical-align修复它,但我很想知道浏览器如何确定这样显示。
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>