身体元素没有边距，但是孩子的边缘会影响身体的边缘

Question

1. 身体有余量：0
2. p个标签的页边距最高：100px;

p标签为何会影响人体的边缘？

我预计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

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

  

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

     

如果没有边框，内边距，内联部分，创建的块格式上下文，或者没有用于将块的页边距与第一个子块的页边距分开的间隙；或没有边框，内边距，内联内容，高度，最小高度或最大高度来将块的边距底部与最后一个子项的边距底部分开，则这些边距会崩溃。折叠后的边距最终出现在父级之外。

有很多方法可以解决它。但是了解这个概念是实现这一目标的一步。

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

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

假设您体内的第一个元素是h1。

Answer 2

应用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 3

我已经更新了您的代码。

StackBlitz

Answer 4

看看这个

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