浮动块增加了额外的上边距

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>

问题是，当我在 header 和 main 标签之间得到额外的 margin 时。我发现 p 标签可以做到这一点。删除 p 标签后没有多余的 margin.

你可以看到 jsfiddle here。

我假设这是与 p 标签添加的 line-break 相关的内容。

如果我添加更多 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;
}

浮动块增加了额外的上边距

Floating block adds extra top margin

html

css

margin