Задание 10/23

«Выпадание» внешних отступов

Пример эффекта выпадания отступа:

В теории написано следующее:
“Чтобы избавиться от эффекта выпадания, можно задать родительскому элементу внутренний отступ (паддинг) сверху или добавить рамку сверху.”

Если добавить border, вопросов нет, все работает как надо.

Но если добавить padding-top:20px; вместо border
то margin-top второго блока будет от первого блока - это хорошо)
НО, значение padding-top:20px, то есть внутреннего отступа переходит между браузером и 1 блоком(padding превращается в margin), чего вроде как произойти не должно, почему так происходит ??? подскажите пожалуйста, хочу понять этот момент, тут получается один эффект заменяется другим…

Почему padding-top:20px становится внешним отступом между браузером и 1 блоком ?