Почему margin работает для одних элементов, но не работает для других?

Question

[RomKing]

Не судите строго, вопрос дилетантский (я еще учусь). Пытаюсь постигнуть логику, иначе плохо усваивается материал.
Вопрос про margin. Допустим есть такая разметка:

Почему в случае с классом .container свойствоmargin-top: 50px auto; отодвигает фоновую картинку на 50px вниз, а в случае с логотипом то же значение вниз отодвигает и логотип и фон (а если задать margin-top: 50px;и тому и другому классу, то логотип и не отодвагается вовсе). При этом ширина auto срабатывает для логотипа как и задумывалось:

Вроде и .container и .logo-icon блочные и у того и другого должен быть свой margin?

P.s. понимаю, что нужно задавать padding и тогда лого встанет как надо, но все же хочу понять работу margin...

Answer 1

[Виталий Першин]

Выпадание внешних отступов
Там же в комментах и ссылка на статью

а если задать margin-top: 50px;и тому и другому классу, то логотип и не отодвагается вовсе

А это уже схлопывание внешних отступов

И не надо делать вложенные селекторы вроде .logo .logo-icon, у вас уже есть класс у иконки пишите под него стили, меньше проблем будет:

.logo {
    // code
}

.logo-icon {
    // code
}

Comments

[RomKing]

Спасибо)

[Виталий Першин]

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