关于容器内的内联块元素和边距的奇怪行为

Question

以下是jsfiddle

在我的示例中，给予其中一个子元素一个底部边距会导致其兄弟元素被我指定的任何边缘向下推;我没想到看到任何移动，因为容器大于每个div。为什么会这样？

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元素中。由于这些元素是“线条块”，它们不再仅仅表现为盒子 - 它们具有流动的文本属性。实际上不是margin推下另一个元素，它是默认的vertical-align属性。

• jsFiddle Demo
• Other Demo that shows the effect with text - 关键是vertical-align