Проблема схлопывающихся отступов

@Aqua77 · Регистрация: 13.07.2015

Author24 — интернет-сервис помощи студентам

Почему если применить с элементу .banner свойство margin, чтобы опустить этот элемент вниз, он сдвигает весь родительский элемент .wrapper? Есть выход просто задать свойство padding, но не могу понять почему в первом случае сдвигается всё содержимое.

HTML5

<body>
<div class="wrapper">
<div class="banner">
<h1>CSS: The Missing Manual</h1>
</div>
<h2>Lorem Ipsum Dolor Sat</h2>
 
</div>
</body>

CSS

.wrapper {
    background: green;
        height: 300px;
}
.banner h1 {
    margin-top: 48px;
}

@monochromer · 04.09.2016, 22:18

Да, есть такая особенность блочной модели - "схлопывание" и "выпадание" внешних отступов.
http://htmlbook.ru/samlayout/b... ya-otstupy

@Aqua77 · 04.09.2016, 23:31 **[ТС]**

Но почему сдвигается всё содержимое а не только .banner

@mrtoxas · 05.09.2016, 00:02

Откройте инструменты разработчика и посмотрите границы элементов. Сдвигает вниз, потому что у h1 есть верхний отступ. Исправить это можно добавлением следующего стиля

CSS

1
2
3

.banner{
  overflow: hidden;
}

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	04.09.2016, 22:18	2
	Да, есть такая особенность блочной модели - "схлопывание" и "выпадание" внешних отступов. http://htmlbook.ru/samlayout/b... ya-otstupy 0

@Aqua77 25 / 25 / 19 Регистрация: 13.07.2015 Сообщений: 433
	04.09.2016, 23:31 [ТС]	3
	Но почему сдвигается всё содержимое а не только .banner 0

	05.09.2016, 00:02

Проблема схлопывающихся отступов

Решение