html - Strange behavior regarding inline-block elements and margins within a container

Question

Here is the jsfiddle

In my example, giving either of the children elements a bottom margin causes its sibling to be pushed down by whatever margin I specify; I hadn't anticipated seeing anything move since the container is larger than each div. Why is this the case?

HTML

<div class=container>

    <section></section>
    <aside></aside>

</div>

CSS

.container {
background: whitesmoke;
height: 12em;
width: 12em;
}

.container section {
background: slategray;
display: inline-block;
height: 04em;
margin-bottom: 20px;
width: 04em;
}

.container aside {
background: gold;
display: inline-block;
height: 04em;
width: 04em;
}

Answer 1

添加vertical-align: top到您的section元素。由于这些元素是 ìnline-block，它们不再简单地表现为盒子——它们具有流动的文本属性。这并不是真正的margin向下推其他元素，而是vertical-align它们具有的默认属性。

• jsFiddle 演示
• 其他用文字显示效果的Demo——关键是vertical-align