段落不尊重标题的边距答案

【问题标题】：Paragraph is not respecting margin of heading段落不尊重标题的边距
【发布时间】：2015-04-21 05:25:53
【问题描述】：

所以我试图在页面上设置垂直节奏。但是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>

编辑：

在这里你可以明白我的意思：

h 的边距会被忽略。

【问题讨论】：

你需要喜欢：jsfiddle.net/mmokzwnn ?
边距是太大还是不够？请创建一个小提琴。
如果边距塌陷，您可以决定为一个元素切换到填充（如果有意义的话），或者您可以添加一个 1px 高度的 div 至此不会让边距塌陷

标签： html css

【解决方案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;
}

【讨论】：

好像是这个解释，我需要，谢谢。
不客气。看到编辑，我写了一个可能的（和干净的）解决方案。

【解决方案2】：

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

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

【讨论】：

但我希望该边距大于 0。我的问题是 p 不尊重“h1”的底部边距。
P is not respecting bottom margin of h1 实际上是你想要的 optput。

【解决方案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

【讨论】：

W3C 规范规定，当两个元素的垂直边距接触时，只尊重边距值最大的元素的边距，而边距值较小的元素的边距将被尊重。崩溃到零。边距是指另一个元素的位置，不包括它的边距。您可以对填充求和，但不能对边距求和。
@kurenaiKunai 您可能希望将您的评论作为编辑添加到您的答案中。很好地解释了问题
@Anzeo 当然可以。

【解决方案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>

【讨论】：