Как избавиться от небольшого промежутка между (после) Header и Nav?

Question

Как выглядит маленький промежуток между этими двумя

[Код CSS. пс. я сделал код сброса кода (не видно на картинке) 2

В нем есть код сброса, я также пытался добавить поля и отступы для каждого из них, и это не сработало. Такое же количество места есть при изменении размера экрана. Есть идеи почему?

Answer 1

Трудно сказать, не видя никакого кода, но, скорее всего, это что-то в вашем нижнем контейнере, в котором есть элемент с полем 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;
}

Надеюсь, это поможет!

Answer 2

Добавить отображение: блок; к изображению заголовка, чтобы удалить пробел.

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

Подробное объяснение: Удаление пробелов ниже элементов inage или почему встроенные элементы имеют спусковые механизмы