CSS中margin-top子元素在某些时候传递给父元素

问题

我碰到的问题如下，body 的 margin 为 0px，height 为 100%，但是它不在页面顶端，导致了滚动条的出现。

body的margin失效.png

实际问题：margin 垂直外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
垂直外边距合并问题常见于第一个子元素的 margin-top 会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下 (FirfFox、Chrome、Opera、Sarfi) 产生问题，IE 下反而表现良好。
如果按照 CSS 规范，IE 的“良好表现”其实是一个错误的表现，因为 IE 的 hasLayout 渲染导致了这个“表现良好”的外观。而其他标准浏览器则会表现出“有问题”的外观。好了，如果你读过了上面 W3Shcool 的 CSS 外边距合并的文章后，就很容易讨论这个问题了。这个问题发生的原因是根据规范，一个盒子如果没有上补白 (padding-top) 和上边框 (border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。 再说了白点就是：父元素的第一个子元素的上边距 margin-top 如果碰不到有效的 border 或者 padding 。就会不断一层一层的找自己“领导” (父元素，祖先元素) 的麻烦。只要给领导设置个有效的 border 或者 padding 就可以有效的管制这个目无领导的 margin 防止它越级，假传圣旨，把自己的 margin 当领导的 margin 执行。

解决方案

一般来说，为父元素设置一个 1px 的 padding-top 就可以了。

设置了padding-top后解决.png