html设置h1离顶远一点,CSS margin 顶部的<h1> 影响父对象的margin_margin_开发99编程知识库...

这是篇很好的文章

在 上面 链接上找到这个。

在父元素和子元素之间折叠页边距

到目前为止，我们只解决了相邻元素的折叠效果，但同一过程保持了它的边缘触摸的true 。 所谓"触摸"，指的是相邻边距之间没有 padding 。边框或者内容的地方。 在下面的示例中，父元素具有一个子元素，上面设置了顶级 margin:

h1 { margin: 0 ；background: #cff; } div { margin: 40px 0 25px ；background: #cfc; } p { margin: 20px 0 0 ；background: #cf9; } 在样式表 上面 中，可以看到为p 元素声明了顶部 margin 值，在代码摘要 below 中，可以看到p 元素：

标题内容

段落内容这里代码的结果如图 2所示。

图 2.在子paragraphAn图示上折叠边距，用于折叠dwt元素和一个子元素的div元素之间的边距。 在h1元素和段落内容之间有 40像素垂直间距。 你可能希望该段落位于标题位置 60px，因为div元素具有 40px的margin-top，并且p 元素上还有 20px 个 margin-top 。 你可能还期望，div元素的background 颜色的20px 会显示 上面 段落。 这不会发生，因为你可以在图 2中看到，边距 collapse 在一起形成一个 margin 。 就像我们已经看到的，只有最大的margin 应用( 在相邻块的情况下) 。

实际上如果div元素没有 top margin 并且p 元素具有 40px margin-top，那么我们将得到相同的结果。 p 元素上的40px margin-top 有效地成为div元素的顶部 margin，并将div推向页面，将p 元素嵌套在顶部。 没有 background 在段落元素 上面 上可见。 。