我试图找出内部 div 的位置，当它显示为 inline-block 并且外部 div 设置了行高时。
<!DOCTYPE html>
<html>
<style>
.outer {
line-height: 20px;
width: 30px;
border: 1px solid black;
}
.inner {
display: inline-block;
width: 20px;
height: 5px;
border: 1px solid green;
}
</style>
<body>
<div class='outer'>
<div class='inner'></div>
</div>
</body>
</html>
https://jsfiddle.net/L4przovt/2/ 这里令人惊讶的是内部 div 的定位。我希望它位于外部 div 的顶部，但它位于中间的某个位置。你能解释一下是什么让它被定位在这个地方吗？
这可能是 font-size vs line-height vs actual height 的重复项但我的问题似乎更具体。如果您认为之前的回答对我来说应该足够了，请告诉我。
最佳答案
.inner div 设置为display: inline-block。这会激活 vertical-align 属性，该属性仅适用于 inline-level and table cell elements .
vertical-align 的默认值是baseline。这就是您所看到的——内部 div 与 baseline of the content 对齐.
要解决此问题，请将此添加到您的代码中:
.inner {
vertical-align: top;
}
关于html - 内部 div 显示 inline-block 的 Div 高度和位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52047691/