margin-top ребенка - сдвигает родителя - почему?
Вставляю блок, и даю ему margin-top: 50px - и он сдвигает родителя body в данном случае. Почему так происходит?
Если же дать padding-top: - тогда ок все
* {
margin: 0;
padding: 0;
}
body {
outline: 1px solid red;
}
.logo-bg {
outline: 1px solid orange;
width: 100px;
height: 100px;
margin-top: 50px;
}<div class="logo-bg">
<a href="#" class="logo">Logotype</a>
</div>Это называется Выпадание внешних отступов (margin'ов)
Если внутри родительского блока расположить блок и задать ему отступ сверху, то внутренний блок прижмется к верхнему краю родительского, а у родительского элемента появится отступ сверху. Т.е. верхний отступ внутреннего элемента «выпадает» из родительского элемента.
Если у родительского элемента тоже был задан внешний отступ, то выберется максимальный отступ между собственным и «выпавшим». Чтобы избавиться от эффекта выпадания, можно задать родительскому элементу внутренний отступ (паддинг) сверху или добавить рамку сверху (border-top: 1px solid transparent).
Внешние и внутренние отступы всегда складываются.
Похоже на своеобразное "схлопывание".
Еще здесь есть более подробная инфа.
В данном примере достаточно заменить у body outline на border или задать padding.
-
06:53
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
-
20:42
-
09:21
Основные этапы разработки сайта для стоматологической клиники
-
12:26
-
10:30
-
18:43
Продвижение своими сайтами как стратегия роста и независимости
-
22:46
-
06:18
-
12:23
- Почему SERVER_ADDR имеет не тот IP 50338 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 31949 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 26313 visits
- Как через css изменить цвет png изображения? 11769 visits
- Blob video url download 11315 visits
- Php curl запрос через прокси с авторизацией 10723 visits
- Работа с captcha vk api 9520 visits
© "hostciti.net" 26.3.2026 | 18:44