Как отделить один блок в CSS, от другого

Question

При верстке сайта я разделил его на три блока: <header>, <main>, <footer>. Проблема в том что блок <main> прилипает к <header>. Верстку веду по шаблону из Figma. То есть блок <main> соеденяется с <header> в один блок. Если открыть консоль и посмотреть на margin-top, то можно увидеть отступы для двух блоков. Хотя отступ должен быть только для <main> Может стоит попробовать изменить позиционирование? Заранее благодарен. Я новичок, поэтому не судите строго.

body {
  background-image: url(png/background1.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

header {
  grid-area: header;
  font-family: Noto Sans;
  font-style: normal;
  font-weight: 500;
  color: white;
  max-height: 47px;
  width: 100%;
  background-color: #26529C;
}

.logo {
  margin-top: 10px;
  margin-left: 15px;
}

main {
  margin-top: 10px;
}

<body>
  <header>
    <img class="logo" src="svg/logo.svg">
  </header>

  <main>
    <div class="block1">
      <img src="svg/block1.svg" class="block1_rectangle">
    </div>
  </main>

  <footer>

  </footer>

</body>

Answer 1

Вместо того чтобы присваивать .logo {margin-top: 10px}, задай внутренний отступ для header или .logo, если я правильно понял вопрос. header {padding-top: 10px} или .logo {padding-top: 10px}

Answer 2

У элементов страницы есть свои базовые стили. Чтобы их обнулить, надо вначале написать: *{margin:0; padding:0}.

БЛОГ НА HUSL

Как отделить один блок в CSS, от другого

Ответы (2 шт):