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

Question

当具有边距的元素包含在另一个元素中时,父元素不会始终包装该边距.

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

• 边界:固体;
• 位置:绝对的;
• 显示:内联块;
• 溢出:汽车

(这只是来自小型测试,毫无疑问还有更多.)

我认为这与折叠边距有关,但是:

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

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

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

编辑:最后的答案是W3C确实指定了这种行为,但那

• 这些规格没有任何意义.
• 规格混合,没有任何解释:
  • '自由边距'(触及父母顶部或底部的边距不包含在父母的内部)和
  • '折叠边距'(允许相邻边距重叠).

演示:

body {
  margin: 0;
}

div.block {
  background-color: skyblue;
}
div.inline-block {
  display: inline-block;
  background-color: lawngreen;
}
div.position-absolute {
  background-color: rgba(255,255,0,.7);
  position: absolute;
  bottom: 0;
  right: 0;
}
div.overflow-auto {
  background-color: hotpink;
  overflow: auto;
}
div.border {
  background-color: aquamarine;
  border: solid;
}

h2 {
  margin: 80px;
  width: 250px;
  border: solid;
}

Answer 1

这就是CSS 根据W3C的工作原理:

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

更具体到你的顶级div的情况:

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

• 如果元素的边距与其父元素的上边距折叠,则框的上边框边缘定义为与父元素相同.
• 否则,元素的父元素不会参与边距折叠,或者仅涉及父元素的下边距.元素顶部边框边缘的位置与元素具有非零底边框时的位置相同.

我能做的最好的事情就是让你指向网站上的"崩溃边缘" (Tommy Olsson和Paul O'Brien).他们做了一个非常详细的解释,其中的示例向您展示了您在问题示例代码中演示的行为.