HTML 和 CSS 有时让我感到困惑。
带边框的 DIV 显示元素及其内容的整个高度的背景颜色。为什么 没有 边框，DIV 会承担(反向继承？)它的 child 的边距？
例如，这里有一个 JSFiddle 说明了带边框和不带边框的行为。
有人愿意解释这是一个“功能”而不是某种错误吗？
更新:向父级添加 1px 的填充是一个快速修复。
最佳答案
当然。在 CSS 中，默认情况下，相邻的顶部和底部边距相互重叠。在相邻的兄弟选择器 ( + ) 被认为/得到很好的支持之前，这是一个明智的解决方法，因为这意味着如果你写 h2 {margin-top: 3em;} ，你的 h2s 上面会有 3ems 的空间，即使它之前有一个段落下边距为 1em。
在您的第二个示例中，因为 <div> 没有任何顶部或底部填充或边框，所以它的顶部和底部边距与 <h1> 的默认顶部和底部边距相邻。即使 <div> 的边距没有任何高度，它们仍然被视为存在，因此 <h1> 的边距必须与它们重叠。由于 <div> 的边距根据定义位于 <div> 的背景颜色区域的外部，因此 <h1> 的边距也必须位于外部。
在您的第一个示例中，因为 <div> 有边框，所以它的边距不再与 <h1> 的边距相邻，因此不会发生重叠。您可以通过向 <div> 添加顶部和底部填充来获得相同的效果:http://jsfiddle.net/ahNUX/7/
(不过，我不确定您对 <div>“反向继承”其子项的填充是什么意思。在您的示例中，<div> 和 <h1> 都没有任何填充。在您的第一个示例中创建了 <div> 内的空间通过 <h1> 的顶部和底部边距。)
关于html - 盒子模型有什么用？影响父项的子边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8350506/