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

概述我是新学 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=" 我是新学 HTML,现在我有一些代码

<div ID="container" >    <div ID="leftBox" >        <div ID="wrapper" >            <div ></div>            <div ></div>        </div>    </div>    <div ID="rightBox" ></div></div>

(我在http://jsfiddle.net/Simon_Chan/Z3WyA/发布了它)

你可以看到leftBox有一个很大的offsettop,但是如果没有包装器或包装器的高度是100％或者没有rightBox或者包装器中没有元素,则在所有这些条件下leftBox都没有offsettop.

为什么这样？以及如何删除它？

谢谢！

解决方法 要解决此问题,您需要将vertical-align：top添加到#leftBox或#rightBox

原因是默认的vertical-align值是基线

Aligns the baseline of the Box with the baseline of the parent Box

父框的基线是框的底部.

Baseline定义为

the line upon which most letters “sit” and below which descenders extend

您在问题中描述的所有案例都会导致基线被更改,从而根据需要对齐元素.

基线的一个很好的例子是以下代码,其中包装器中没有元素< div>但是非常大的字体大小的文字.你可以看到绿色底部< div>与父级的基线(红色虚线边框< div>)对齐,以及粉红色< div>文本如何移动到它位于父基线上的文本的位置.

<div >    <div >        <div >foo</div>    </div>    <div ></div></div>

总结

以上是内存溢出为你收集整理的html – 嵌套在另一个inline-block元素中的inline-block元素有一个offsetTop全部内容，希望文章能够帮你解决html – 嵌套在另一个inline-block元素中的inline-block元素有一个offsetTop所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。