Question

当它显示为inline-block并且外部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的副本，但我的问题似乎更具体。请告诉我您是否认为先前的答案对我来说足够了。

Answer 1

.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;
}

div高度和位置以及内部div显示内联块

1 个答案: