Почему фон съезжает вниз из-за margin?

Question

[danilr]

<div class="all-wrapper">
            <div class="first-page">
                  <div class='flex-container'>
                    <div class="logo">
                        <img src="img/wonlex.png"/>
                        <span>Официальный дистрибьютер</span>
                    </div>
                    <nav>
                        <ul class="menu">
                            <li>О магазине</li>
                            <li>Приимущества оригинала</li>
                            <li>Основные функции</li>
                            <li>Каталог часов</li>
                            <li>Как купить</li>
                            <li>Контакты</li>
                        </ul>
                    </nav>
                    <div class="phone-adres">
                        <span class="phone">8 [phone]</span>
                        <span class="adres">Новосибирск, Кирова 29</span>
                    </div>
                </div>

            </div>
        </div>

*{
    box-sizing: border-box;    
        }
    
html{
    height: 100%;
    
}
body{
    margin: 0;
    height: 100%;
}
.all-wrapper{
    background: white;

}
.first-page{
    background-image: url("img/main-bg.png");
}
.flex-container{
    display: flex;
    justify-content:space-between;
    margin: 20px 40px 0 40px;

}

div с классом flex-container лежит внутри блока .first-page, но почему то margin внутреннего блока влияет на фон внешнего блока, почему?

Comments

[NaN]

Пример в песочнице будет?

[Сергей delphinpro]

Фон из-за внешних отступов съезжать не может.
Фон вообще съезжать не может, если ему явно не указать смещение в background-position.
Сдвинуться может только элемент.

Неправильная формулировка вопроса затрудняет поиск правильного решения. В свою очередь осмысленно заданный вопрос, как правило уже содержит в себе половину ответа.

Answer 1

[Ankhena]

Этот эффект называется схлопывание вертикальных margin.
Читать htmlbook.ru/blog/skhlopyvayushchiesya-otstupy или нагуглите любую другую статью по этому поводу.

Comments

[R0nti]

С Вашего позволения добавлю немного. Касательно нагуглить, то лучше всегда использовать первоисточник. К примеру по вашему вопросу можно посмотреть спеку здесь https://www.w3.org/TR/CSS2/box.html#margin-properties.

[Ankhena]

R0nti, ага, я тоже за спеку.

Только там иногда скупо, скучно и не все готовы воспринимать английский, даже не смотря на встроенный переводчик в браузере. И еще, когда у человека проблема, он формулирует ее как-то типа "не работает margin" или "странно работает margin", а не "боксовая|блочная модель документа". К моей печали спека не находится по запросу с проблемой :(

[R0nti]

Вот, я тоже раньше её не любил и согласен, что там скупо и скучно, но для того, чтобы научиться нужно прикладывать усилия, а иначе можно потерять n-ое количество лет, пользуясь готовыми решениями. Ну и английский тоже нужно подтягивать, обязательно. Диалог наш должен немножко подтолкнуть читателя на мысли! Спасибо за понимание.) Добра и отличного настроения.