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

Posted 2023-03-06

【中文标题】孩子与其父母之间的边距顶部[重复]

【英文标题】：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://***.com/questions/13573653/css-margin-terror-margin-adds-space-outside-parent-element 相关问题可以用overflow: auto解决

谢谢@masterpreenz。我了解，提供的答案是针对 CSS2 的链接。也申请当前的 CSS？

是的，它确实适用于当前的 CSS。CSS2 规范将永远有效：meta.***.com/a/385583/8620333

【参考方案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在给定值之后开始填充：顶部。