在HTML 5文档中添加边框时，页面元素移动时出现问题。
我希望包含的标头元素（灰色）出现在屏幕顶部，但它似乎占据了内部div（红色）的边距。但是，如果我在标题中添加边框，它会出现在我期望的位置，并且红色的内部div只会稍微移动！
（第一张图片：无边框；第二张图片：有边框）
我尝试使用div而不是header元素设置相对或绝对定位，将边界和填充设置为0，使用HTML4doctype等。HTML进行验证。这是HTML剥离的所有内容，仍然无法使用。它发生在最新的Chrome和FF中。
帮帮我！！我错过了什么？或其他解决方法（不保留边界）？
HTML:
<!DOCTYPE HTML> <html> <head> <title>Test</title> </head> <body> <header><div id="mydiv"></div></header> <div id="content"><p>hello</p></div> </body> </html>
CSS:
header {background-color:#CCCCCC; width:960px; height:430px;} #mydiv {width:960px; height:320px; margin:80px 0px 0px 0px; background-color:#CC0000; }
问题出在所谓的“边际崩溃”上。很简单：2个相邻的边距塌陷到两个中的最高边（我说两个，但是可能更多）。
在您的情况下，“＃mydivs” margin-top（80像素）正在触摸“标题”的-0 margin-top像素。它们毗邻-它们之间没有元素，也没有填充或边界。
margin-top
因此，边距塌陷到两个中的最大值（80像素），然后将其应用于父子层次结构中的最高元素- header在这种情况下就是这样。
header
解决此问题的一种方法是在页边距之间放置一些内容。一些填充或标题上的边框（工作正常）。
header { border-top: 0.1em solid rgba(0,0,0,0); }
第二种解决方案（我的首选）是使父元素创建新的块格式化上下文。这样，它的边距根本不会与孩子的边距一起崩溃。
如何创建块格式上下文？ 有四种可能的方法。
为防止页边距缩小，您可以执行以下4种操作中的任何一种。我通常选择第4条）-将溢出设置为自动，因为这只是副作用，所以很有可能不会成为问题。
header { overflow: auto; }
基本上，这就是父子边际崩溃的原因。兄弟姐妹之间也存在边距崩溃，并且规则基本相同：2个相邻的边距塌陷至两者中的最高点。不是的解决方案。
