Нижний отступ (margin) выходит за границы родителя

Question

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

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: gray;
}

main {
  background-color: #f5f2f2;
}

header {
  position: sticky;
  top: 0;
  width: 100%;
  height: 6vw;
  z-index: 102;
  padding: 8px 55px;
  background: #fff;
}

.obj {
  margin: 200px auto;
  width: 500px;
  height: 800px;
  background-color: red;
}

<!DOCTYPE html>
<html lang="ru">

<head>
</head>

<body>
  <main>
    <header></header>
    <div class="content">
      <div class="obj"></div>
    </div>
  </main>
</body>

</html>

Answer 1

Сделай так и все будет норм)

.content {
display: flex;
}

Answer 2

Не суйте margin куда не надо и будет всё нормально.
margin - это внешний отступ, которой отодвигает другие элементы
padding - внутренний отступ, внутри элемента

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: gray;
}

main {
  background-color: #f5f2f2;
}

header {
  position: sticky;
  top: 0;
  width: 100%;
  height: 6vw;
  z-index: 102;
  padding: 8px 55px;
  background: #fff;
}

.content {
  padding: 200px 0;
}

.obj {
  margin: 0 auto;
  width: 500px;
  height: 800px;
  background-color: red;
}

<main>
  <header></header>
  <div class="content">
    <div class="obj"></div>
  </div>
</main>

БЛОГ НА HUSL

Нижний отступ (margin) выходит за границы родителя

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