Question

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

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

我的问题是这个。当我在标题元素上将填充设置为0时，我的布局顶部会出现一个白色边框：

Not Working JSFiddle

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

Working JSFiddle

任何人都可以告诉我为什么会这样？

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

这是因为你的标题中有一个h1哪个边距不会崩溃并影响其父级边距。

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

更多信息：

CSS margin-top of affects parent's margin

CSS布局 - 不使用任何填充时的空白区域

1 个答案: