CSS 布局 - 白色 space 不使用任何填充时

Question

首先，我问这个问题是为了学习和更好地理解 CSS。其次，我正在使用这个规范化版本：

https://necolas.github.io/normalize.css/

我的问题是这样的。当我将 header 元素的内边距设置为 0 时，我的布局顶部出现了一个白色边框：

但是，当我在 header 上设置任何填充量时，它确实有效：

谁能告诉我这是为什么？

html,
body {
  height: calc(100% - 100px);
}
body {
  font-family: verdana;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.container {
  position: relative;
  height: 100%;
}
header {
  width: 100%;
  height: 125px;
  padding: 0;
  background-color: red;
}
nav {
  width: 100%;
  height: 50px;
  padding-left: 10px;
  vertical-align: middle;
  line-height: 50px;
  background-color: yellow;
}
aside {
  float: left;
  width: 200px;
  height: calc(100% - 25px);
  padding: 10px;
  background-color: blue;
}
section {
  float: right;
  padding: 10px;
  height: calc(100% - 25px);
  width: calc(100% - 200px);
  background-color: green;
}
footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  padding-left: 10px;
  vertical-align: middle;
  line-height: 50px;
  background-color: orange;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css" rel="stylesheet"/>
<div class="container">
  <header>
    <h1>Header</h1>
  </header>
  <nav>Menu</nav>
  <aside>Aside</aside>
  <section>Content</section>
  <footer>Footer</footer>
</div>

Answer 1

这是因为您的页眉中有一个 h1，其页边距不会折叠并影响其父页边距。

要解决这个问题，您可以将 overflow: auto; 添加到您的父元素中，在本例中是在您的 <header> 标签中。

更多信息：

CSS margin-top of affects parent's margin

CSS 布局 - 白色 space 不使用任何填充时

CSS Layout - White space when NOT using any padding

css

liquid-layout