浮动块增加额外的上边距

Question

我有这个非常简单的代码：

header {
  padding: 10px;
  background-color: green;
}
aside {
  background-color: blue;
  float: left;
}
section {
  background-color: orange;
}

<header>
  one
</header>
<main>
  <aside>sdf</aside>
  <section>
    <p>fd</p>
  </section>
</main>

问题在于，我在margin和header标记之间得到了额外的main。我发现p标记就是这样。删除p代码后，没有额外的margin。

你可以看到jsfiddle here。

我认为此处与line-break标记添加的p相关联。

如果我添加这个css，还有更多：

main {
  overflow: hidden;
}

我得到的事件更奇怪的结果。这是什么原因？

Answer 1

p默认情况下为margin-block-end: 1em;margin-block-start: 1em;，因此请重置

header {
  padding: 10px;
  background-color: green;
}
aside {
  background-color: blue;
  float: left;
}
section {
  background-color: orange;
}
p {
  margin: 0
}

<header>
  one
</header>
<main>
  <aside>sdf</aside>
  <section>
    <p>fd</p>
  </section>
</main>

Answer 2

默认情况下，HTML页面中包含一些正文margin。所以你只需要margin:0px;

body{
margin:0px;
}