Почему margin считает от html, а не от родителя?

Question

[Overlord934]

Почему header__inner считает margin не от header, а от всего html?

HTML

<header class="header">
        <div class="container header__inner">
            <a class="logo" href="#">
                <img class="logo__img" src="img/logo.png" alt="">
            </a>
            <nav class="menu">
                <ul class="menu__list">
                    <li class="menu__list-item">
                        <a class="menu__list-link" href="#">
                            Про нас
                        </a>
                    </li>
                    <li class="menu__list-item">
                        <a class="menu__list-link" href="#">
                            Каталог
                        </a>
                    </li>
                    <li class="menu__list-item">
                        <a class="menu__list-link" href="#">
                            Команда
                        </a>
                    </li>
                    <li class="menu__list-item">
                        <a class="menu__list-link" href="#">
                            Відгуки
                        </a>
                    </li>
                    <li class="menu__list-item">
                        <a class="menu__list-link" href="#">
                            Курси
                        </a>
                    </li>
                    <li class="menu__list-item">
                        <a class="menu__list-link" href="#">
                            Контакти
                        </a>
                    </li>
                </ul>
            </nav>

            <a class="phone" href="tel:[phone]">[phone]</a>
        </div>
    </header>

    <footer class="footer">
        <div class="container ">

            <a class="logo" href="#">
                <img class="logo__img" src="img/logo.png" alt="">
            </a>
            <nav class="menu">
                <ul class="menu__list">
                    <li class="menu__list-item">
                        <a class="menu__list-link" href="#">
                            Про нас
                        </a>
                    </li>
                    <li class="menu__list-item">
                        <a class="menu__list-link" href="#">
                            Каталог
                        </a>
                    </li>
                    <li class="menu__list-item">
                        <a class="menu__list-link" href="#">
                            Команда
                        </a>
                    </li>
                    <li class="menu__list-item">
                        <a class="menu__list-link" href="#">
                            Відгуки
                        </a>
                    </li>
                    <li class="menu__list-item">
                        <a class="menu__list-link" href="#">
                            Курси
                        </a>
                    </li>
                    <li class="menu__list-item">
                        <a class="menu__list-link" href="#">
                            Контакти
                        </a>
                    </li>
                </ul>
            </nav>
            <div class="footer__contacts">
                <a class="phone" href="tel:[phone]">[phone]</a>
                <a class="email" href="mailto:[e-mail]">[e-mail]</a>
                <ul class="footer__social">
                    <li class="footer__social-item">
                        <a class="footer__social-link" href="#">
                            <img class="footer__social-img" src="img/facebook.svg" alt="">
                        </a>
                    </li>
                    <li class="footer__social-item">
                        <a class="footer__social-link" href="#">
                            <img class="footer__social-img" src="img/instagram.svg" alt="">
                        </a>
                    </li>
                    <li class="footer__social-item">
                        <a class="footer__social-link" href="#">
                            <img class="footer__social-img" src="img/linkedin.svg" alt="">
                        </a>
                    </li>
                    <li class="footer__social-item">
                        <a class="footer__social-link" href="#">
                            <img class="footer__social-img" src="img/youtube.svg" alt="">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </footer>

CSS

.container{
    max-width: 1180px;
    padding: 0 10px;
    margin: 0 auto;
}

header{
background-color: #FFF8F3;
}

.header__inner{
    margin-top: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}

Comments

[Ankhena]

Гуглить "схлопывание и выпадение вертикальных margin".
Потом "разница между padding и margin". Потому что это вообще не margin. Но схлопывание как раз таки должно научить отличать когда что использовать.

[Overlord934]

Ankhena, но там же нет никакого margin-bottom. Оно не должно схлопываться. Должно же отталкиваться от верхней границы хедера. И почему вообще хедер отталкивается от html, а не header__inner от header

[Ankhena]

Overlord934, пожалуйста, начните с начала и погуглите. В данном случае это выпадение margin.

[LAVladis]

Overlord934,
Почему так происходит, потому что свойство margin-top которое в header__inner добавляет верхний отступ (margin) между содержимым элемента и его родительским элементом.

Уберите все отступы внутри header__inner и добавьте внешний отступ снизу у header, это позволит создать пространство между header и следующим элементом.

.header {
    background-color: #FFF8F3;
    margin-bottom: 45px; /* Добавьте внешний отступ снизу */
}