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

Question

1. 正文有边距：0
2. 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>

Answer 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>

Answer 2

我已经更新了你的代码。

StackBlitz

Answer 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;
}

Answer 4

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

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

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

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

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

h1:first-child {
  margin-top: 0;
}

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