相关疑难解决方法(0)

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

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

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

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

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

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;
}