Question

所以我在当前文档的顶部有一个带p的div。我将margin-top设置到<p>上，期望div和pelememt之间可能有余量。使我误解的是margin-top显示在正文和父div之间的结果。参见示例。

但是，如果我将div.container设置为1px边框，则margin-top可能会在p元素与其父div之间重新出现。

此外，如果将div.container设置为弹性显示而不是默认块，则margin-top也可以直观地工作。

为什么？我对此可以做任何事情吗？

html, body {
  padding: 0;
  margin: 0;
  background-color: grey;
}

.container {
  background-color: red;
  display: block; /* flex could also make it work */
  margin: 0;
  /* The border setting would bring back the margin-top on p */
  /* border: 1px solid black; */
}

.paragraph {
  margin-top: 100px;
}

<div class="container">
<p class="paragraph"> sadf </p>
</div>

Answer 1

html, body {
  padding: 0;
  margin: 0;
  background-color: grey;
}

.container {
  background-color: red;
  display: block; /* flex could also make it work */
  margin: 0;
  overflow: hidden;
  /* The border setting would bring back the margin-top on p */
  /* border: 1px solid black; */
}

.paragraph {
  margin-top: 100px;
}

<div class="container">
<p class="paragraph"> sadf </p>
</div>

这都是关于垂直边距崩溃的。

最快的解决方案是添加溢出：隐藏；用于父元素。

您可以在此处了解有关垂直边距塌陷的更多信息

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

您可以在编辑的代码段中将其固定。

为什么顶部的p元素会为父元素创建边距？

1 个答案: