html - border属性对top margin的影响

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>

当我从 .header 中删除 border: solid 1px black 时，我在 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>