Question

当具有边距的元素包含在另一个元素中时，父元素不会始终包裹该边距。

很多事情会导致父母包裹孩子的边缘：

边界：固体;
的位置是：绝对的;
显示：内联块;
溢出：自动

（这只是小测试，毫无疑问还有更多。）

我认为这与折叠边距有关，但是：

W3C规范页面没有此类行为的描述。
这里没有重叠的边距。
在这个问题上，所有浏览器的行为似乎都是一致的。
行为受与边距无关的触发器影响

默认溢出的元素的逻辑是什么：auto应该包含与溢出设置为auto的材料不同的材料。

为什么除了普通div的默认行为之外的所有内容都假设父级包含保证金 - 为什么常规默认值不包括保证金？

编辑：最后的答案是W3C确实指定了这种行为，但是

规格没有任何意义。
The specs mix, without any word of explanation：
- '自由边距'（父母的顶部或底部的边距不包含在父母的顶部或底部）和
- '折叠边距'（允许相邻边距重叠）。

演示：

<!doctype html>
<html>
<head>
<title>Margins overextending themselves</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
    body{
        margin:0;
    }
    div.b{
        background-color:green;
    }
    div.ib{
        display:inline-block;
        background-color:red;
    }
    div.pa{
        background-color:yellow;
        position:absolute;
        bottom:0; right:0;
    }
    div.oa{
        background-color:magenta;
        overflow:auto;
    }
    div.brdr{
        background-color:pink;
        border:solid;
    }

    h1{margin:100px; width:250px; border:solid;}
</style>
</head>
<body>
<div class="b">
    <h1>Is the margin contained?</h1>
</div>
<div class="ib">
    <h1>Is the margin contained?</h1>
</div>
<div class="pa">
    <h1>Is the margin contained?</h1>
</div>
<div class="oa">
    <h1>Is the margin contained?</h1>
</div>
<div class="brdr">
    <h1>Is the margin contained?</h1>
</div>
</body>
</html>`

Answer 1

这就是CSS的工作方式according to W3C：

在本规范中，表达式折叠边距意味着两个或多个框（可能彼此相邻或嵌套）相邻的边距（没有非空内容，填充或边框区域或间隙将它们分开）形成一个保证金。

更适合您的顶级div的情况：

如果框的顶部和底部边距相邻，则边距可能会通过它折叠。在这种情况下，元素的位置取决于它与边缘正在折叠的其他元素的关系。


如果元素的边距与其父元素的上边距折叠，则框的上边框边缘定义为与父元素相同。

否则，元素的父元素不参与边距折叠，或仅涉及父元素的下边距。元素顶部边框边缘的位置与元素底部边框非零时的位置相同。

我能做的最好的事情就是指向"Collapsing Margins" on sitepoint （Tommy Olsson和Paul O'Brien）。他们做了一个非常详细的解释，其中的示例向您展示了您在问题示例代码中演示的行为。

为什么父元素不包含保证金？

1 个答案: