Один 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, заранее прошу прощения, если вопрос сильно тривиальный).
Дополнительно:
Читайте https://htmlbook.ru/samlayout/blochnaya-verstka/sk...
Добавить можно, что выпадения и схлопывания нет во флексах и гридах
https://softwaremaniacs.org/blog/2005/09/05/css-la...
Это частный случай схлопывания margin-ов. Стандартный современный способ это отключить — задать родителю display:flow-root.
- Менее современный способ это задать родительскому диву padding в 1px
- rakkas,
Менее современный способ это задать родительскому диву padding в 1px
Малологичный способ.
Гораздо разумнее просто задать нужный padding родителю, а тот margin убрать.
Проще всего добавить для родительского элемента (.div-bl) overflow: auto;
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема, которую вы описываете, связана с концепцией потока форматирования в CSS, который определяет, как элементы HTML отображаются на веб-странице.
При использовании свойства margin-top для дочернего элемента вложенного в другой, вы можете столкнуться с проблемой, когда это свойство применяется к родительскому элементу. Это происходит из-за того, что в CSS существует концепция внутренних и внешних отступов элементов, которые влияют на их позиционирование на странице.
Когда вы применяете margin-top к дочернему элементу, это создает внешний отступ для него, который может влиять на позиционирование родительского элемента. Если у дочернего элемента нет достаточного пространства для размещения своего внешнего отступа, он может "выпрыгнуть" наружу и примениться к родительскому элементу.
Чтобы избежать подобных проблем, можно использовать свойство padding для родительского элемента вместо margin для дочернего элемента. Padding создает внутренний отступ вокруг содержимого элемента, который не влияет на его внешний вид.
Вот пример, как можно исправить вашу проблему:
<div class="parent"> <div class="child"> <!-- Ваш контент --> </div> </div><div class="parent"> <div class="child"> <!-- Ваш контент --> </div> </div>
.parent { padding-top: 20px; /* Применяем внутренний отступ для родительского элемента */ } .child { margin-top: 10px; /* Применяем внешний отступ для дочернего элемента */ }
Таким образом, применяя внутренние отступы к родительскому элементу и внешние к дочернему, вы сможете избежать конфликтов между ними и корректно разместить элементы на странице.