边框到框时如何在css中获得边距？ [复制]

Question

我的页面中有两个div。当我对这些框应用边框时，它们会从顶部获得边距；但是当不应用边框时，框会显示为没有边距。为什么？

.header {
  width: auto;
  height: 100px;
  background-color: gray;
  text-align: center;
  line-height: 50px;
  border: 1px solid black;
}

.menu {
  background-color: green;
  height: 80px;
  border: 1px solid black;
}

<div class="header">
  <h1>title</h1>
</div>
<div class="menu"></div>

Answer 1

将overflow:auto 添加到您的.header div。

jsFiddle example

并在您使用时查看collapsing margins。