marign-top失效问题

 

w3cshcool中的解释是：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

外边距合并的条件
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
当一个空元素没有边框或填充时，上下外边距碰到了一起，也会发生合并。
避免外边距合并
行内框
浮动元素
绝对定位元素
因此要避免外边距合并，可以：

给父元素添加一个小的padding-top。
给父元素添加样式：overflow:hidden;
将其设为浮动元素或绝对定位。
给父元素添加border。