关于容器

Question

这里内inline-block的元素和利润率奇怪的行为是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