Html 段落不涉及标题的边距

所以我试图在页面上设置垂直节奏。但是

p

不考虑

h1

的底边。有人能解释一下为什么吗

这是我的代码（em单位更好，但为了简单起见，我使用了像素）：

html{
字体大小：18px；
线高：1.5；
}
h1{
字体大小：30px；
线高：1.5；
利润率：4.5px 0 4.5px；
}
p{
利润率：27px0；
}

blaasdfasf

相邻元素之间的边距折叠。简单来说，这意味着对于正常文档流中相邻的垂直块级元素，只有边距值最大的元素的边距将被接受，而边距值较小的元素的边距将被折叠为零

html {
  font-size: 18px;
  line-height: 1.5;
}

h1 {
font-size: 30px;
line-height: 1.5;
 margin:4.5px 0 4.5px;

}

p {
    margin: 0;
    padding: 0;
}

---

W3C规范指出，当两个元素的垂直边距相接触时，只有边距值最大的元素的边距将被接受，而边距值较小的元素的边距将折叠为零。边距是指其他元素的位置，不包括其边距。您可以求和填充，但不能求和边距

 html {
          font-size: 18px;
          line-height: 1.5;
    }

    h1 {
    font-size: 30px;
    line-height: 1.5;
    margin: 4.5px 0 4.5px;

    }

    p {
    margin: 27px 0;
    padding 0;
    }

试试这个

它叫“折页边距”，有很多关于它的话题。基本上，更大的利润将被计算在内，这是很常见的。您所能做的就是增加较大的边距或更改HTML元素。您可能想阅读：

---

一个好的解决方案是创建一个容器，将

p

元素放入

div

中，并将其放入

padding top

属性中。有了它，内容将有自己的空白：

html{
字号：18px；
线高：1.5；
}
h1{
字体大小：30px；
线高：1.5；
利润率：4.5px0.15px；
溢出：自动；
}
#边际{
填充顶部：15px；
}

blaasdfasf

这是一个老问题，但现在（在中）可以使用

显示：网格

css规则使元素不重叠边距（请参见工作代码示例）

div：第一个孩子{
背景色：红色；
}
div{
背景颜色：蓝色；
}
p组{
背景色：白色；
}
.显示网格{
显示：网格；
}

段落块

段落块

段落块

段落网格

段落网格

段落网格

您需要这样做：？保证金是太多还是不够？请创建一个提琴。如果边距折叠，您可以决定为一个元素切换到填充（如果有意义），或者您可以添加一个1px高度的div，它将不允许边距折叠，但我希望边距大于0。我的问题是

p

不尊重“h1”的下边距。p不尊重“h1”的下边距实际上意味着您想要的optput。W3C规范指出，当两个元素的垂直边距相接触时，只有边距值最大的元素的边距才会得到尊重，而边距值较小的元素的边距将折叠为零。边距是指其他元素的位置，不包括其边距。您可以对填充进行求和，但不能对边距求和。@kurenaiKunai您可能希望在答案中包含您的注释作为编辑。提供了一个很好的解释issue@Anzeo当然可以。看来这就是我需要的解释，谢谢。不客气。看到编辑，我写了一个可能的（干净的）解决方案。