7

当我在 HTML 5 文档中添加边框时，页面元素移动时遇到问题。

我希望包含标题元素（灰色）出现在屏幕顶部，但它似乎从内部 div（红色）中占据了边距。但是，如果我在标题中添加边框，它会出现在我期望的位置，并且红色的内部 div 只会稍微移动！

（第一张图片：无边框；第二张图片：有边框）

无边界带边框

我尝试设置相对或绝对定位，使用 div 而不是 header 元素，将边距和填充设置为 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; }
4

3 回答 3

11

这个问题来自一种叫做“margin collapsing”的东西。这很简单：2 个相邻的边距折叠到两者中的最高值（我说的是两个，但可能更多）。

在你的情况下，'#mydivs' margin-top- 80px - 正在触摸'header' margin-top- 0px。它们是相邻的——它们之间没有元素，也没有填充，也没有边框。

因此，边距折叠到两者中的最高者（80px），然后将其应用于父子层次结构中的最高元素 -header在这种情况下就是这样。

解决这个问题的一种方法是在页边空白之间放置一些东西。一些填充或标题上的边框都可以正常工作。

header {
  border-top: 0.1em solid rgba(0,0,0,0);
}

第二种解决方案（我的首选）是让父元素创建一个新的块格式化上下文。这样一来，它的利润就不会随着它的孩子的利润而崩溃。

如何创建块格式化上下文？ 有四种可能的方式。

  1. 通过浮动它。
  2. “立场免除它”。
  3. 添加以下显示之一：“table-cell”、“table-caption”或“inline-block”。
  4. 添加可见以外的溢出。

为了防止边距崩溃，您可以执行以下 4 项中的任何一项。我通常选择 4 号） - 将溢出设置为自动，因为它只是副作用......好吧，它不太可能成为一个问题。

header {
  overflow: auto;
}

这基本上就是父子边距折叠。兄弟姐妹之间也存在边距折叠，规则几乎相同：2 个相邻边距折叠到两者中的最高边距。解决方案不是。

这是对边距折叠的一个很好的解释- http://www.howtocreate.co.uk/tutorials/css/margincollapsing

于 2012-07-26T01:58:57.480 回答
2

这称为折叠边距。它们可以通过添加padding到父元素（在本例中为<header>）来克服。

代码（带填充，不带填充）：

注意padding:0.001em;. 这使得边距不再折叠，但不会向<header>.

header {padding:0.001em; background-color:#CCCCCC; width:960px; height:430px;}
#mydiv {width:960px; height:320px; margin:80px 0px 0px 0px; background-color:#CC0000; }
于 2012-07-26T01:58:45.137 回答
1

bfrohs 答案中折叠边距的链接帮助我找到了适合我的解决方案，它可能会帮助遇到此问题的其他任何人。

绝对定位的 div 不会折叠，因此使 header 元素相对和内部 div 绝对可以提供正确的定位，而无需添加带有填充或边距的空间。

工作示例：http: //jsfiddle.net/8QPGJ/

（不含定位：http: //jsfiddle.net/8QPGJ/1/）

于 2012-07-26T02:20:14.043 回答