如何去掉small space in-between (after)Header 和Nav？

Question

How it looks, that small space between those two

[Css 代码。 ps。我做了代码重置代码（在图片上看不到）2

它有重置代码，我也尝试在每个代码上添加边距和填充，但没有用。调整屏幕大小时，space 的数量相同。知道为什么吗？

Answer 1

添加显示：块；到 header 图像以删除白色 space。

header img {
  width: 100%;
  height: 50vh;
  display: block
}

详细解释：Removing white space below inage elements, or why inline elements have descenders

Answer 2

如果没有看到任何代码就很难说，但很可能是底部容器中的某个元素具有顶部边距。如果容器没有任何填充，顶部边距将到达其容器之外。

要让边距留在内部，您需要向其容器添加填充。或者，您可以删除推到容器外的元素的上边距。

我制作了一个codepin给你玩。它有一个你正在经历的例子，下面的例子通过添加填充来解决问题。

https://codepen.io/joshcoast/pen/MGvxgw

HTML:

<div class="bigheader">Some stuff</div>
<div class="content">
  <nav class="nav1">
    <a href="#">a link</a>
  </nav>
</div>
<br>

<div class="bigheader">Another example</div>
<div class="content content-with-padding">
  <nav class="nav2">
    <a href="#">a link</a>
  </nav>
</div>

CSS:

.bigheader {
  background-color: #999;
  color: white;
  padding: 20px;
  height: 200px;
}

.content {
  background-color: tan;
}
.content-with-padding {
  padding: 5px;
}

.nav1 {
  margin-top: 20px;
}

.nav2 {
  margin-top: 20px;
}

希望对您有所帮助！

如何去掉small space in-between (after)Header 和Nav？

How to get rid of small space in-between (after)Header and Nav?

html

css

header

margin

nav