Question

How it looks, that small space between those two

[Css代码。 PS。我做了代码重置代码（无法在图片上看到）2

它有重置代码，我也试图在每一个上添加边距和填充，但它没有工作。调整屏幕大小时会有相同的空间。知道为什么吗？

Answer 1

添加显示：块;到标题图像以删除空白区域。

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

详细说明：Removing white space below inage elements, or why inline elements have descenders

Answer 2

很难说没有看到任何代码，但最有可能的是你的底部容器中有一个元素，它有一个margin-top。如果容器没有任何填充，则顶部边距将到达其容器外部。

要获得保留在里面的边距，您需要在其容器中添加填充。或者，您可以移除正在容器外推的元素的上边距。

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

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

希望有所帮助！

如何摆脱Header和Nav之间（之后）的小空间？

2 个答案: