盒子模型 - 为什么带粘性页脚的页眉螺钉的边距

Question

我正在尝试使用 http://ryanfait.com/sticky-footer/

中的以下粘性页脚解决方案

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}
h1 {
    margin-top:1em;  
}

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <h1>This header screws with sticky footer</h1>
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

但是，正如上面的代码片段所示，向

标记添加边距会导致出现不需要的滚动条。

根据我的基本理解，边距应该只影响

标签的大小，它不应该影响包装器的 size/position（除非没有 space - 但显然有很多 space).

编辑：我不是想找到解决方案，我想了解会发生什么。看起来 margin 并没有将

标签相对于父容器向下推，而是将父容器与

标签一起向下推。这是正确的吗？如果是，为什么？这似乎相当违反直觉。

Answer 1

如果你想操纵 margins/paddings 属性它总是保存添加 display:inline-block 属性而不是使用内联元素。将它添加到您的 h1 标签，您的问题就会得到解决。

这里是 post 对这个问题的一些解释内联元素和填充

编辑：我有一个解释给你。

在 CSS 中我们有类似 "collapsing margins" 的内容。 W3C 是这样定义它的：

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding, or border areas, or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

页边距仅在以下情况下才相邻：

both belong to in-flow block-level boxes that participate in the same block formatting context

no line boxes, no clearance, no padding and no border separate them (Note that certain zero-height line boxes are ignored for this purpose.)

both belong to vertically-adjacent box edges, i.e. form one of the following pairs:

top margin of a box and top margin of its first in-flow child bottom margin of box and top margin of its next in-flow following sibling

bottom margin of a last in-flow child and bottom margin of its parent if the parent has 'auto' computed height

top and bottom margins of a box that does not establish a new block formatting context and that has zero computed 'min-height', zero or 'auto' computed 'height', and no in-flow children

如果您想阅读更多相关信息，这里有一些有用的链接：

W3C.org
Understand CSS Margins Collapsing（清晰的解释+例子）

总而言之，有很多不同的方法可以解决这个问题。例如，将 display:inline-block 、 float:left 甚至 border:1px black 属性添加到包装器元素或 h1 标记将修复 "problem"。当然这不是真正的问题，在某些情况下折叠边距真的很有用。

Answer 2

您可以将 overflow:auto; 或 overflow:hidden; 添加到包装器 div。如果您想将 h1 保留为块元素，这可能是更好的解决方案。

Answer 3

看来我的问题是由 collapsed margins 引起的，为此引入的规则是为了在所有具有边距的元素之间产生一致的间距。如果没有折叠保证金规则，在某些情况下会应用两次保证金。

这在 another Whosebug question 中有更全面的解释。

盒子模型 - 为什么带粘性页脚的页眉螺钉的边距

Box Model - Why does a margin for header screw with sticky footer

html

css

footer

sticky-footer

标记添加边距会导致出现不需要的滚动条。 根据我的基本理解，边距应该只影响

标签的大小，它不应该影响包装器的 size/position（除非没有 space - 但显然有很多 space). 编辑： 我不是想找到解决方案，我想了解会发生什么。看起来 margin 并没有将

标签相对于父容器向下推，而是将父容器与

标签一起向下推。这是正确的吗？如果是，为什么？这似乎相当违反直觉。

标记添加边距会导致出现不需要的滚动条。

根据我的基本理解，边距应该只影响

标签的大小，它不应该影响包装器的 size/position（除非没有 space - 但显然有很多 space).

编辑：我不是想找到解决方案，我想了解会发生什么。看起来 margin 并没有将