Adding CSS border changes positioning in HTML5 webpage
邵亦
问题内容：
问题答案：
在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像素。它们毗邻-它们之间没有元素，也没有填充或边界。
因此，边距塌陷到两个中的最大值（80像素），然后将其应用于父子层次结构中的最高元素- header在这种情况下就是这样。
解决此问题的一种方法是在页边距之间放置一些内容。一些填充或标题上的边框（工作正常）。
header {
border-top: 0.1em solid rgba(0,0,0,0);
}
第二种解决方案（我的首选）是使父元素创建新的块格式化上下文。这样，它的边距根本不会与孩子的边距一起崩溃。
如何创建块格式上下文？ 有四种可能的方法。
- 通过浮动。
- “绝对的位置”。
- 添加以下显示之一：“表格单元格”，“表格标题”或“行内块”。
- 添加可见以外的溢出。
为防止页边距缩小，您可以执行以下4种操作中的任何一种。我通常选择第4条）-将溢出设置为自动，因为这只是副作用，所以很有可能不会成为问题。
header {
overflow: auto;
}
基本上，这就是父子边际崩溃的原因。兄弟姐妹之间也存在边距崩溃，并且规则基本相同：2个相邻的边距塌陷至两者中的最高点。不是的解决方案。
类似资料：