代码之家 › 专栏 › 技术社区 › zlenyk

带内部DIV显示内联块的DIV高度和位置

css html

zlenyk · 技术社区 · 6 年前

我试图弄清楚内部的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 但我的问题似乎更具体。如果你认为以前的回答对我来说足够的话,请告诉我。