为什么 margin 子元素会影响 body 元素？

Question

请您解释一下为什么 body 会受到其子项边距的影响？我不喜欢这种行为。在我看来，子项的边距 div 应该从其父项的边界到其边界计算。

您可以看到蓝色的 div 会影响绿色 body 的边距，然后您会看到红色的 html 背景，我不希望这样。

就我而言，我不想编辑 body CSS 属性

Answer 1

如果您将正文 css 修改为以下内容，您将实现您的目标：

body {
  background-color: green;
  height: 100%;
  width:100%;
  margin:0;
  position: absolute;
}

/* 另一种技巧 */ 删除 top-margin:50px，然后用另一个 div 包裹你的 toto div 并给它 padding-top:50px；如下所示：

html {
  background-color: red;
  height: 100%;
}
body {
  background-color: green;
  height: 100%;
  margin:0;
}

#container { padding-top:50px; }

.toto {
  background-color: blue;
  width: 100px;
  height: 100px;
}

<div id="container">
  <div class="toto">

  </div>
</div>

为什么 margin 子元素会影响 body 元素？

Why does margin child element affect body element?

html

css

margin