边框属性对上边距的影响

Question

参考以下代码：

body {
  height: 500px;
  width: 80%;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  background-color: lightgray;
}
.header {
  width: 80%;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  background-color: yellow;
  /* border: solid 1px black; */
}

<div class="header">
  <ul>
    <li><a href="index.html">Dashboard</a></li>
  </ul>
</div>

当我border: solid 1px black从 .header 中删除时，我会在 div 元素上方获得一些空间。但是当我添加边框属性时，我得到了完美的结果（即删除了空间）。边界属性应该对这个空间产生什么影响？

Answer 1

这是由于边距崩溃（MDN，W3.org）。

在您的示例中， header 元素包含一个无序列表，默认情况下，该列表具有顶部和底部边距。由于边框折叠，它的边距被转移到标题，而标题又被转移到正文。结果，当标题和列表与正文的顶部对齐时，正文被下推。

添加边框是防止边距折叠的一种方法（请参阅 W3 规范）。如果要避免添加边框，请使用其他方法，例如分配overflow: hidden给标题。

body {
  height: 500px;
  width: 80%;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  background-color: lightgray;
}
.header {
  width: 80%;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  background-color: yellow;
  /*border: solid 1px black;  */
  overflow: hidden;
}

<div class="header">
  <ul>
    <li><a href="index.html">Dashboard</a></li>
  </ul>
</div>