2

Блока внутри .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>

11
  • Попробуй задать width: 100%; и height: 100%;
    – Salli
    Commented 27 авг. 2020 в 16:28
  • Если посмотреть внимательно, верхний отступ и нижний одинаково работают, уберите header и посмотрите что получится или, к примеру, замените sticky на fixed
    – Greg--
    Commented 27 авг. 2020 в 16:42
  • Я знаю, что он одинаково работает. Вот только это не меняет сути.
    – silentwasd
    Commented 27 авг. 2020 в 16:43
  • Так что должно быть - оба внутри или оба снаружи?
    – Greg--
    Commented 27 авг. 2020 в 16:44
  • 1
    Может задать .content padding: 200px 0; а .obj margin: auto;, Такой результат должен быть?
    – Greg--
    Commented 27 авг. 2020 в 16:53

2 ответа 2

0

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

.content {
display: flex;
}
0

Не суйте 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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.