html - 将 CSS 应用于 HTML 标签时 HTML 元素边距工作很奇怪

Question

我无意中看到了这个问题。但它看起来很奇怪，我试图理解这里发生了什么，但我找不到任何答案。谁能解释我这个问题？

看看这个css。标题具有顶部边距，但边距未应用于 heder 元素。我的解释是我看到标题顶部的小红色空间。但这是行不通的。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background-color: white;
}

body {
    background-color: red;
    margin: 20px;
}

header {
  height: 100vh;
  margin-top: 20px;
  background-color: blue;
}

https://jsbin.com/rexobepayo/edit?html,css,output

标签： htmlcss

Answer 1

这是由于所谓的边距崩溃而发生的。正如 MDN所说：

块的顶部和底部边距有时会合并（折叠）成单个边距，其大小是单个边距中最大的一个（或者只是其中一个，如果它们相等），这种行为称为边距折叠。

换句话说，因为body和header都具有顶部边距，所以浏览器会选择最大的（在您的情况下它们是相同的）并仅应用一个。