HTML页面中margin-top引发的外边距合并问题求助

这是CSS里典型的**外边距塌陷（Margin Collapse）**问题。当块级子元素的上外边距和父元素的上外边距直接相邻（中间没有边框、内边距、内容隔开）时，两个外边距会合并成一个，最终显示的是两者中较大的那个值。你给logo div加的margin-top没有和header的顶部产生间距，反而“穿透”了header，和body的外边距合并，所以body和header之间出现了空隙。

给你几个实用的解决办法：

• 给header添加透明上边框：border-top: 1px solid transparent;，让logo的margin-top和header的边框相邻，阻断外边距合并。
• 把logo的margin-top换成header的padding-top：比如给header设padding-top: 20px;，同时去掉logo的margin-top，这样既实现间距，又不会触发塌陷。
• 给header设置overflow: hidden;，触发BFC（块级格式化上下文），BFC内部的元素外边距不会和外部元素合并。
• 给header添加display: flow-root;，这是专门用来创建BFC的属性，不会带来浮动、溢出隐藏这类副作用，是比较推荐的现代方案。

内容的提问来源于stack exchange，提问作者Oo-_-oO