Проблемы при верстке?

Question

[fredman]

Есть родительский блок и в нем находится другой, нужно чтобы дочерний блок отступал он родителя с помощью margin-top, но за ним вместе тянется родитель.

<div class="outer">
  <div class="inner">INNER</div>
</div>

* {
  padding: 0px;
  margin: 0px;
}
.outer {
  width: 100%;
  height: 100vh;
  background-color: red;
}
.inner {
  background-color: green;
  width: 60%;
  height: 60px;
  margin: 25px auto;
}

Результат вышеуказанного кода:


Почему так происходит и как это исправить?

Comments

[Геннадий]

Не стоит выкладывать ваш код в виде скриншотов, тем самым вы нарушаете правила ресурса. Оформите его через соответствующие теги или, в идеале, через песочницу, например, codepen.io.

[Ankhena]

1. Гуглите схлопывание и выпадение вертикальных margin
2. И вообще это padding родителя.

[szQocks]

это выпадение отступов, гугли

[0xD34F]

В данный момент ваш вопрос нарушает следующие пункты правил: 3.1, 3.2, 3.4, 3.6, 3.8. Вы обязаны это исправить, а именно:

Сократите количество тегов.
Придумайте вопросу такой заголовок, который будет: а) грамотным; б) отражать суть вашей проблемы.
Уберите мусорные реплики, не несущие информации о вашей проблеме - "здравствуйте", "подскажите пожалуйста", "такая проблема".
Замените скриншот кода текстом.

Answer 1

[Геннадий]

Для обнуления появившегося отступа можно использовать свойство overflow со значением auto.

<div class="outer">
  <div class="inner">INNER</div>
</div>

В стилях к классу родительского div добавлено свойство overflow: auto;

* {
  padding: 0px;
  margin: 0px;
}
.outer {
  width: 100%;
  height: 100vh;
  background-color: red;
  overflow: auto; 
}
.inner {
  background-color: green;
  width: 60%;
  height: 60px;
  margin: 25px auto;
}

В итоге получаем такой результат