孩子与其父母之间的边距顶部[重复]答案

【问题标题】：margin-top between child and its parent [duplicate]孩子与其父母之间的边距顶部[重复]
【发布时间】：2020-09-12 21:55:16
【问题描述】：

我有两个 div：.content 和 .main-section，第二个在第一个里面。我将margin-top 添加到.main-section，我希望看到.content 的一部分，但似乎这也有margin-top。为什么会有这种行为？以及如何在.content 和.main-section 之间创建一个边距？

body {
  margin: 0;
}

.content {
  min-height: 100vh;
  background: peru;
}

.main-section {
  background: red;
  height: calc(100vh - 30px);
  margin-top: 30px;
}

<div class="content">
  <div class="main-section">
    <p class="parragraph"> parragraph </p>
    <p class="parragraph"> parragraph </p>
  </div>
</div>

预期：

输出：

【问题讨论】：

https://stackoverflow.com/questions/13573653/css-margin-terror-margin-adds-space-outside-parent-element 相关问题可以用overflow: auto解决
谢谢@masterpreenz。我了解，提供的答案是针对 CSS2 的链接。也申请当前的 CSS？
是的，它确实适用于当前的 CSS。CSS2 规范将永远有效：meta.stackoverflow.com/a/385583/8620333

标签： html css

【解决方案1】：

正如 masterpreenz 在评论中所说，使用overflow:auto 来解决这个问题。你可以在这里阅读更多关于它的信息：https://www.w3.org/TR/CSS2/box.html#collapsing-margins

body {
  margin: 0;
}

.content {
  min-height: 100vh;
  background: peru;
  overflow: auto;
}

.main-section {
  background: red;
  height: calc(100vh - 30px);
  margin-top: 30px;
}

<div class="content">
  <div class="main-section">
    <p class="parragraph"> parragraph </p>
    <p class="parragraph"> parragraph </p>
  </div>
</div>

【讨论】：

对，这个链接是针对 CSS2 的。也申请实际的CSS？

【解决方案2】：

你应该为你的父 div 设置 padding-top 以使其成为你想要的

body {
  margin: 0;
}

.content {
  min-height: 100vh;
  background: peru;
  padding-top:30px;
}

.main-section {
  background: red;
  height: calc(100vh - 30px);
}

<div class="content">
  <div class="main-section">
    <p class="parragraph"> parragraph </p>
    <p class="parragraph"> parragraph </p>
  </div>
</div>

【讨论】：

【解决方案3】：

如果你使用margin:top效果，那么如果没有指定溢出条件，main section也可以走出内容块，所以最好使用padding:，它指定main section在给定值之后开始填充：顶部。

【讨论】：