關於容器

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