Question

我正在尝试理解CSS的基础知识，我遇到了一个问题，我有一个带有3个div元素的nav元素。 div元素显示为内联块，因此所有元素都在nav元素中对齐。

当我在第一个div中添加一个段落元素时，会出现问题。突然间，第一个div与其他两个不对齐。我使用Chrome的开发人员工具来查看发生的情况。带p元素的div没有任何边距或填充。默认情况下，段落标签的边距为16px，但当我将其设置为0时，容器div仍然没有对齐，所以我认为这不是问题所在。

当我添加像p这样的子元素时，有人可以解释导致第一个div从其原始位置移动的原因吗？

p的高度小于包含div的高度。 p的边缘似乎并不重要，因为我将其设置为0并且div仍未对齐。

JsFiddle：http://jsfiddle.net/jjF7R/

HTML

<nav>
 <div>
   <p>hi</p>
 </div>

 <div>
 </div>

 <div>
 </div>
</nav>

CSS

nav{
width:330px;
height:50px;
border:1px solid black;
display:inline-block;
}

div{
width:100px;
border:1px solid blue;
height:100%;
display:inline-block;
}

Answer 1

您需要将vertical-align:top添加到div规则：

div {
    width:100px;
    border:1px solid blue;
    height:100%;
    display:inline-block;
    vertical-align:top;
}

<强> jsFiddle example

内联元素的默认垂直对齐方式是基线，这是您在原始代码中看到的内容。

Answer 2

div{
    width:100px;
    border:1px solid blue;
    height:100%;
    display:inline-block;
        vertical-align: top; /* middle, bottom... whatever is needed */
}

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

发生原因导致inline-block元素受到上下文流的影响，在这个世界中，线高统治，设计师使用Helvetica，强大的野兽正在照顾你的填充... :)

Answer 3

用户

vertical-align:top;

表示CSS中的div类。

在此处查看 - ＆gt; http://jsfiddle.net/kA8sx/

希望这有帮助!!!

子元素在父元素中的定位

3 个答案: