@Stpnki

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

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

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

(делаю первые шаги во frontend, заранее прошу прощения, если вопрос сильно тривиальный).
  • Вопрос задан
  • 1500 просмотров
Решения вопроса 2
@SelenIT3
Это частный случай схлопывания margin-ов. Стандартный современный способ это отключить — задать родителю display:flow-root.
Ответ написан
@warrenpeace
Проще всего добавить для родительского элемента (.div-bl) overflow: auto;
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы