身体元素没有边距，但孩子的边距会影响身体的边距[重复]

Posted 2023-03-06

【中文标题】身体元素没有边距，但孩子的边距会影响身体的边距[重复]

【英文标题】：Body element has no margin but children's margin affects body's margin [duplicate]

【发布时间】：2019-11-05 21:38:57

【问题描述】：

正文有边距：0 p 标签有 margin-top: 100px;

为什么p标签会影响body的margin-top？

我预计 margin-top:100px 只会影响 p 标签。

/////////////////////////////////////// ////////

我想知道为什么我应该使用 padding-top 而不是 margin-top？

边距在元素周围创造额外的空间。相比之下，填充在元素内创建了额外的空间。

在这种情况下，p 标签位于正文中，因此边距和内边距应该看起来相同

https://stackblitz.com/edit/react-lktg4q?file=style.css

html, body 
  margin: 0;
  height: 100%;


h1, p 
  font-family: Lato;
  margin: 0;
  margin-top:100px;


#root 
  background: blue;
  height: 100vh;

      <div>
        <Hello name=this.state.name />
        <p>
          Start editing to see some magic happen :)
        </p>
      </div>

【问题讨论】：

如您所见，您已为h1 和p 应用了margin-top

如果你想要的只是顶部保持蓝色，请将 margin-top 替换为 padding-top

据我了解，您需要通过身体的蓝色。为此，您需要申请padding-top

这是H1 margin-top的效果，你可以将margin-top替换为padding-top

【参考方案1】：

应用padding-top 而不是margin-top

html,
body 
  margin: 0;
  height: 100%;


h1,
p 
  font-family: Lato;
  margin: 0;
  padding-top: 100px;


#root 
  background: blue;
  height: 100vh;

<div id="root">
  <div>
    <h1>Hello React!</h1>
    <p>Start editing to see some magic happen :)</p>
  </div>
</div>

【参考方案2】：

我已经更新了你的代码。

StackBlitz

【讨论】：

如果 OP 也想要 margin-top:100px 和 h1 怎么办？

我想知道为什么要使用 padding-top 而不是 margin-top？

您应该在此答案中添加更多内容，而不是单个 URL。如果 StackBlitz 示例被删除，此答案将失效。

【参考方案3】：

看看这个，

#root 
  background: blue;
  height: 100vh;

我可以说你想要你的身体的背景颜色，因为#root 是父元素并且没有元素可以成为它的父元素，你可以将#root css 添加到你的html, body css ,

html, body 
  margin: 0;
  height: 100vh;
  background: blue;


h1, p 
  font-family: Lato;
  margin: 0;
  margin-top:100px;

现在来到页面上的滚动，滚动是因为margin-top:100px。您可以通过两种方式解决此问题。

第一种方式，

如果margin-top:100px 是整个应用程序中的固定布局，那么

html, body 
  margin: 0;
  height: calc(100vh-100px); //minus your margin from viewport height will eliminate scroll
  background: blue;
 

第二种方式，

将margin-top 替换为padding-top，因为填充包含在元素高度中，而边距不包含。

h1, p 
  font-family: Lato;
  margin: 0;
  padding-top:100px;

【参考方案4】：

这就是margin collapsing的效果。根据那个 MDN 页面：

父母和第一个/最后一个孩子

如果没有边框、内边距、内联部分、创建的块格式上下文或将块的上边距与其第一个子块的上边距分开的间隙；或者没有边框、填充、内联内容、高度、最小高度或最大高度来将块的边距底部与其最后一个子块的边距底部分开，然后这些边距折叠。折叠的边距最终在父级之外。

有很多方法可以尝试解决它。但是理解这个概念是实现它的一步。

在您的情况下，正文中第一个元素的边距（即h1）会影响正文的边距。如果您希望在第一个 h1 上没有边距，您可以添加此 (see it on this jsfiddle)：

h1:first-child 
  margin-top: 0;

假设正文中的第一个元素是h1。

【讨论】：

补充阅读：bitsofco.de/collapsible-margins