我试图找出内部div位置是什么，当它显示为内联块并且外部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;
}