Я пытаюсь удалить пробелы вокруг изображения заголовка и панели навигации

Question

Я просмотрел все похожие вопросы и попытался применить их к своей ситуации, но, похоже, ничего не работает. пробелы над / внизу изображения заголовка, я думал, исчезнут, добавив display: block;.

body {
  background-image: url("assets/images/richie-pic.jpg");
  font-size: 28px;
}

.mrrichie-img {
  margin: 0;
  padding: 0;
  width: 100%;
  height: auto;
  display: block;
}

.topnav {
  overflow: hidden;
  background-color: #111111;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 20px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #313331;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

image Я не уверен, влияют ли на него margin: 0; и padding: 0;, но это также было в решении, которое я пробовал .

Answer 1

Вокруг основного элемента есть поле.

Если вы установите для поля значение 0, оно должно удалить пространство вокруг изображений заголовков.

body{
   margin:0;
}

Answer 2

просто добавьте margin: 0 в тело, вот ваш пример без пробела, или вы можете сделать его более общим, добавив *{margin: 0; padding: 0}, тем самым вы убедитесь, что все элементы не имеют лишнего места во всех браузерах

https://codepen.io/engeslamadell/pen/LYNYPqo