html body 出现,为什么有些html和body属性会出现这种行为？

我想了解一些事情.

第一个问题：

为什么身体上有一个保证金？

html {

height: 100%;

background-color: red;

}

body {

height: 100%;

margin: 0;

background-color: yellow;

}

Hello Plunker!

如果我在Chrome中查看开发工具检查器,它会向我显示h1上边距从主体上边距开始(图片显示h1突出显示)：

第二个问题：

在下一个例子中,为什么黄色会被吸引到身体外？

我希望只在body元素中看到黄色,因为我设置了overflow属性：

body {

height: 100px;

background-color: yellow;

margin: 0;

overflow: hidden;

}

第三个问题

如果我在html元素上添加背景颜色,它可以工作,黄色只填充身体元素,为什么？

html {

background-color: red;

}

body {

height: 100px;

background-color: yellow;

margin: 0;

overflow: hidden;

}