Question

我正在玩这个基本

让我的页面占据整个视口

html {
  height: 100%;
}

body {
  min-height: 100%;
}

但是我注意到当我添加一个带边距的块元素时，页面大小调整了边距量。要演示，请在webkit浏览器中尝试使用此HTML：

<html style="height: 100%; margin: 0; padding: 0;">
  <body style="min-height: 100%; margin: 0; padding: 0;">
    <h1 style="margin-top: 100px;">Box Sizing</h1>
  </body>
</html>

你会注意到身体总是溢出html元素，导致它滚动。有人知道为什么会出现这种情况吗？

Answer 1

这称为collapsing margins。 R元素上的垂直边距正在与h1元素折叠，这会导致相邻的边距组合并形成单个边距，从而导致body元素向下移动（如虽然它有body margin-top。

根据8.3.1 of the relevant spec部分，以下规则可防止边距崩溃：

100px框的边距不会崩溃（甚至没有流入的子项）。

因此，您只需将元素的inline-block设置为display，然后添加inline-block即可。你也可以浮动元素：

浮动框与任何其他框之间的边距不会崩溃（甚至在浮动及其流入子项之间也不会崩溃）。

在下面的更新示例中，我只是将width: 100%元素的display设置为h1，以便边距不再崩溃。

inline-block

html {
  height: 100%;
}
body {
  min-height: 100%;
  margin: 0;
}
h1 {
  margin-top: 100px;
  display: inline-block;
  width: 100%;
}

请参阅我链接的规范，以获取更详细的说明以及防止边距折叠的其他解决方法和规则。

在后代元素上设置margin-top时，'body'元素顶部的Webkit Extra Space

1 个答案: