Один div контейнер вложен в другой. Применяю margin-top к дочернему, но свойство применяется к родительскому. Почему так?

Question

[Stpnki]

У меня есть div вложенный в другой div. Я задаю margin-top для внутреннего, предполагая что внутренний контейнер "оттолкнется" от внешнего и сместится за заданное количество px. Но вместо этого внешний сдвигается на заданное количество px, а внутренний стоит на месте (относительно внешнего. При этом я задаю margin-left и тут срабатывает как и предполагается: внутренний контейнер "отталкивается" от левой стороны внешнего (но при этом ширина контейнера 50px, я задаю margin-left:50px и внутренний контейнер становится посередине внешнего, почему так - тоже не понятно).
Объясните, пожалуйста, почему так и как это работает? Я хочу что бы внутренний отталкивался от левой и верхней стороны внешнего на заданное количество px.
Вот ссылка на codepan: https://codepen.io/stpnki/pen/ZEZOVPY

Пробовал с position: absolute. Но это не совсем то.

(делаю первые шаги во frontend, заранее прошу прощения, если вопрос сильно тривиальный).

Comments

[Ankhena]

Читайте https://htmlbook.ru/samlayout/blochnaya-verstka/sk...
Добавить можно, что выпадения и схлопывания нет во флексах и гридах

[Stpnki]

Ankhena, благодарю!

[Stpnki]

Ankhena, А не подскажите, почему отступ слева делится пополам? Задаю 50, он отступает на 25.

[Ivan Ustûžanin]

Stpnki, он отступает на 50: ширина контейнера 150, 50 левый маржин, 50 ширина самого квадрата, как раз остаётся 50 справа

[Ankhena]

Stpnki, я вижу отступ в 50

[cssfish]

почитайте доброе вечное
https://softwaremaniacs.org/blog/2005/09/05/css-la...

[Stpnki]

IvanU7n, да. Надо высыпаться. Точно 50)

Answer 1

[SelenIT3]

Это частный случай схлопывания margin-ов. Стандартный современный способ это отключить — задать родителю display:flow-root.

Comments

[rakkas]

Менее современный способ это задать родительскому диву padding в 1px

[Ankhena]

rakkas,

Менее современный способ это задать родительскому диву padding в 1px

Малологичный способ.
Гораздо разумнее просто задать нужный padding родителю, а тот margin убрать.

Answer 2

[warrenpeace]

Проще всего добавить для родительского элемента (.div-bl) overflow: auto;