Question

所以我试图在页面上设置垂直节奏。但p不尊重h1的底边。有人能解释一下为什么吗？

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

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

<body>
  <h1>blaasdfasf</h1>
  <p>...</p>
</body>

编辑：

在这里你可以看到我的意思：

h1 preview

p preview

h的边距会被忽略，因为你可以这样做。

Answer 1

它被称为“折叠边际”，并且有很多关于它的主题。基本上较大的保证金将被计算，这是非常普遍的。您所能做的就是增加更大的边距或更改HTML元素。您可能希望阅读：

一个好的解决方案是，您将p元素的容器创建为div并将其放入padding-top属性中。有了它，内容将有自己的余地：

html {
  font-size: 18px;
  line-height: 1.5;
}

h1 {
  font-size: 30px;
  line-height: 1.5;
  margin: 4.5px 0 15px;
    overflow:auto;
}

#margin {
    padding-top:15px;
}

<h1>blaasdfasf</h1>
<div id="margin">
    <p>...</p>
</div>

或者只需将padding直接应用于p元素：

p {
    padding-top:15px;
}

Answer 2

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

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

http://jsfiddle.net/mmokzwnn/3/

Refrence

Answer 3

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

试试这个jsfiddle

Answer 4

这是一个古老的问题，但是如今（在modern browsers中），您可以使用display: grid css规则使元素不与边距重叠（请参见工作代码示例）。

div:first-child {
  background-color: red;
}
div {
  background-color: blue;
}
div p {
  background-color: white;
}
.display-grid {
  display: grid;
}

<div>
  <p>Paragraph block</p>
  <p>Paragraph block</p>
  <p>Paragraph block</p>
</div>
<div class="display-grid">
  <p>Paragraph grid</p>
  <p>Paragraph grid</p>
  <p>Paragraph grid</p>
</div>

段落不符合标题的边际

4 个答案: