Question

我有两个内嵌块元素（并排）。当我设置其中一个的上边距时，两个移动。为什么呢？

HTML

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

CSS

div {
    width: 150px;
    height: 150px;
    display: inline-block
}
div:first-child {
    background: #279B61;
    margin-top: 3em
}
div:last-child {
    background: #CC3333
}

Answer 1

默认vertical-align会导致元素的底部对齐。

如果你向下推一个，它会增加它们所在线的高度。

使用vertical-align: top（例如）更改它。

Answer 2

因为内联元素的默认垂直对齐方式是基线。设置vertical-align:top会将第二个div拉回来。

div {
    width: 150px;
    height: 150px;
    display: inline-block;
    vertical-align:top;
}

<强> jsFiddle example

为什么两个内联块元素都会在以下情况下崩溃？

2 个答案: