我期望包含的标题元素(灰色)出现在屏幕的顶部,但它似乎从内部div(红色)获取边距.但是,如果我在标题中添加一个边框,它会出现在我预期的位置,红色的内部div只会略微移动！
(第1张图片：没有边框;第2张图片：带边框)
我尝试设置相对或绝对定位,使用div而不是header元素,设置margin和&填充为0,使用HTML4 doctype等.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; }
解决方法
在你的情况下,’#mydivs’margin-top – 80px – 触及’header的margin-top-0px.它们相邻 – 它们之间没有任何元素,也没有填充物,也没有边界.
因此,边距会崩溃到两个中最高的(80px),然后应用于父子层次结构中最高的元素 – 这就是这种情况下的标题.
这个问题的一个解决方案是在边缘之间放置一些东西;一些填充,或标题上的边框(工作正常).
header {
border-top: 0.1em solid rgba(0,0);
}
第二个解决方案(我的首选解决方案)是使父元素创建一个新的块格式化上下文.这样,它的边缘就不会随着它的孩子而崩溃.
如何创建块格式化上下文？
有四种可能的方式.
>浮动它.
>“排名绝对”.
>添加以下显示之一：“table-cell”,“table-caption”或“inline-block”.
>添加除可见之外的溢出.
为了防止边缘崩溃,你可以做任何这些4.我通常选择4号) – 设置溢出到auto,因为它只是副作用……好吧它很可能成为一个问题.
header {
overflow: auto;
}
这基本上是父母子女边缘崩溃的原因.兄弟姐妹之间也存在边缘崩溃,规则大致相同：2个相邻的边缘坍塌至两个中的最高点.这不是解决方案.
这是对边缘崩溃的一个很好的解释 – http://www.howtocreate.co.uk/tutorials/css/margincollapsing