嵌套在另一个inline-block元素中的inline-block元素有一个offsetTop

Question

我刚开始学习HTML，现在我有一些代码像

<div id="container" style="height:300px;width:500px;font-size:0">
    <div id="leftBox" style="display: inline-block; background: pink; width: 50%; height: 100%;">
        <div id="wrapper" style="height:10%;">
            <div style="display: inline-block; background: red; width: 50%; height: 100%;"></div>
            <div style="display: inline-block; background: blue; width: 50%; height: 100%;"></div>
        </div>
    </div>
    <div id="rightBox" style="display: inline-block; background: green; width: 50%; height: 100%;"></div>
</div>

(我把它贴在http://jsfiddle.net/Simon_Chan/Z3WyA/上)

可以看到leftBox有一个很大的offsetTop，但是如果没有wrapper 或， wrapper的高度为100% 或，没有rightBox 或， wrapper中没有元素，在所有这些情况下，leftBox没有offsetTop。

为什么这么做?如何去除呢?

谢谢!

Answer 1

要解决这个问题，您需要将vertical-align:top添加到#leftBox 或 #rightBox

原因是vertical-align的默认值是baseline

将框的基线与父框的基线对齐

父框的基线是框的底部。

基线定义为

你在问题中描述的所有情况都会导致基线被改变，从而使元素按照期望对齐。

基线的一个很好的例子是下面的代码，其中包装器<div>中没有元素，而是非常大的字体大小的文本。您可以看到绿色 <div>的底部是如何与父元素基线对齐的(红色虚线<div>)，以及粉红色 <div>的文本是如何移动到父元素基线文本所在的位置的。

<div style="height:300px;width:500px;font-size:0;border:1px dotted red">
    <div style="display: inline-block; background: pink; width: 50%; height: 100%;">
        <div style="height:100%;font-size:150px">foo</div>
    </div>
    <div style="display: inline-block; background: green; width: 50%; height: 100%;"></div>
</div>

Answer 2

这样做是因为各种框位于基线上的方式。解决这个问题的最简单方法是将它们垂直排列。例如:使用div {vertical-align:top }

要查看默认情况下内联块框位于基线上的情况，请参阅http://jsfiddle.net/veCEf/。特别要注意的是，没有任何内容的内联块div框的底部是如何位于基线上的，而一旦它们有了内容，其内容的底部就会位于基线上。