html - h1 或 p margin-top 与 DIV 的填充求和，如何折叠它们

Question

我需要将段落和标题放入带有填充的 div 中。但是 h1/p 的 margin-top 与 div 的 padding 相加并使 h1/p 定位较低。如何避免这种情况？我不需要将 margin-top 设置为零，我需要填充和边距像段落边距一样折叠。

例如，div 中的左内边距和上边距应该相等，但它们不相等:https://jsfiddle.net/7trhs2vp/2/

<div style="padding:1em;background:silver">
  <h1>Header</h1>
</div>

body {font-size:20px;}
h1 {margin:1em 0;}

Answer 1

您将需要删除或调整边距或填充。填充不会像边距那样折叠。

如果您的 h1 或 p 的上边距是包含填充的容器 DIV 的第一个子元素，您可以使用 CSS 伪选择器 :first-child 删除/调整边距。

在下面的演示中，我为一些元素添加了边框，以帮助直观显示边距的位置。

body,
h1,
p {
  margin: 0;
}

h1,
p {
  margin: 1.5rem;
  border: 1px dotted orange;
}

.container {
  padding: 1rem;
  border: 1px dashed skyblue;
}

/*
   This is applied to ANY h1 or p that is the first child
   of ANY element that is a child of a .container element.

   Place the child selector (>) between .container and/or 
   h1 and p to limit it to only child elements of .container.

  .container > h1:first-child {}
*/
.container h1:first-child,
.container p:first-child {
  margin-top: 0;
}

<div class="container">
  <h1>
   H1 Header
  </h1>
  <p>
    Content content content.
    Content content content.
    Content content content.
    Content content content.
    Content content content.
    Content content content.
  </p>
</div>

<div class="container">
  <p>
    Content content content.
    Content content content.
    Content content content.
    Content content content.
    Content content content.
    Content content content.
  </p>
  <p>
    Content content content.
    Content content content.
    Content content content.
    Content content content.
    Content content content.
    Content content content.
  </p>
</div>

演示 JSFiddle .