6

Вставляю блок, и даю ему margin-top: 50px - и он сдвигает родителя body в данном случае. Почему так происходит?

Если же дать padding-top: - тогда ок все

* {
  margin: 0;
  padding: 0;
}

body {
  outline: 1px solid red;
}

.logo-bg {
  outline: 1px solid orange;
  width: 100px;
  height: 100px;
  margin-top: 50px;
}
<div class="logo-bg">
  <a href="#" class="logo">Logotype</a>
</div>

3
  • так же было у меня, так и не нашел ответа, единственное, что спасло ситуацию, задал проблемному элнменту в твоем случае это - "logo-bg" display: inline-block не пришу ответом, потому что не знаю ответа на вопрос "почему".... тоже бы хотел бы знать точный ответ
    – Air
    Commented 21 окт. 2017 в 19:19
  • @Air да решает вопрос padding-top, вместо margin-top, но интересно то почему)
    – user190134
    Commented 21 окт. 2017 в 19:53
  • А вот и ответ)))))
    – Air
    Commented 22 окт. 2017 в 7:30

2 ответа 2

15

Это называется Выпадание внешних отступов (margin'ов)

Если внутри родительского блока расположить блок и задать ему отступ сверху, то внутренний блок прижмется к верхнему краю родительского, а у родительского элемента появится отступ сверху. Т.е. верхний отступ внутреннего элемента «выпадает» из родительского элемента.

Если у родительского элемента тоже был задан внешний отступ, то выберется максимальный отступ между собственным и «выпавшим». Чтобы избавиться от эффекта выпадания, можно задать родительскому элементу внутренний отступ (паддинг) сверху или добавить рамку сверху (border-top: 1px solid transparent).

Внешние и внутренние отступы всегда складываются.

2
  • Кстати вот хорошая статья об использовании внешних и внутренних отступов habrahabr.ru/post/340420
    – user271410
    Commented 22 окт. 2017 в 4:18
  • Спасибо огромное! Тоже столкнулся с этой проблемой. Теперь знаю, как её решить))
    – JustLearn
    Commented 23 янв. 2019 в 9:37
3

Похоже на своеобразное "схлопывание". Еще здесь есть более подробная инфа. В данном примере достаточно заменить у body outline на border или задать padding.

Ваш ответ

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

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