关于内联块元素和容器内边距的奇怪行为 [英] Strange behavior regarding inline-block elements and margins within a container

问题描述

以下是 jsfiddle

在我的例子中，给任一个孩子元素一个底部边距导致其兄弟姐妹被我指定的任何边缘下推;我没有想到看到任何移动，因为容器大于每个div。为什么会出现这种情况？

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;
}

推荐答案

添加 vertical-align：top 到节元素。由于这些元素是内联块，它们不再简单地表现为框 - 它们具有流动的文本属性。它不是真正的 margin 是推下其他元素，它是默认的 vertical-align 属性

Add vertical-align: top to your section element. As these elements are ìnline-block, they are not simply behaving as boxes anymore - they have flowing text properties. It is not really the margin that is pushing down the other element, it is the default vertical-align property they have.

• jsFiddle演示


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

• jsFiddle Demo
• Other Demo that shows the effect with text - the key is vertical-align

这篇关于关于内联块元素和容器内边距的奇怪行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！