Двач, почему так происходит? Есть один контейнер, задал для него фон и поместил внутрь него другой контейнер. Для дочернего контейнера задал margin-top и фон, который задан родительскому сполз вниз. Это только фон сполз, или весь родительский контейнер сполз? Почему так происходит, почему margin заданный для дочернего контейнера как-то влияет на родительский? Вот код: https://codepen.io/vertically-challenged/pen/yLBJYKW
>>202047245>>202047278Ну так мне нужен этот отступ, алсо нудно, чтобы вон не сползал. Почему этот отступ заставляет сползать родительский контейнер?
Есть мнение, что это из-за того, что родительский хедер не позиционирован (то есть позиционирован относительно - по умолчанию) и поэтому дочерний контейнер сдвигает его на свой отступ.хедеру: position:absolute;
Пиздец ты место нашёл для такого вопросаРешение гуглится за минуту по запросу "margin display out of parent"
>>202047085 (OP)Потому что маргин используется для внешних отступов. Для внутренних используется паддинг.Сейчас у тебя маргин дочернего элемента "выпадает" за родителя, отталкивая их обоих от верха страницы.
>>202048467>маргин дочернего элемента "выпадает" за родителя, отталкивая их обоих от верха страницыНу так же не должно быть? Почему он не отталкивает дочерний от внутренней границы родительского?
>>202048509Работает. Абсолютное позиционирование привязывает родителя к 0-0 и не даёт дочернему отступу его сдвинуть.
>>202048604Что за хуйню ты несешь? Где там у тебя родитель и дочерний?У тебя есть ОДИН контейнер, у окторого стоит ВЕРХНИЙ ОТСТУП, то есть ты говоришь "ОТОЙДИ БЛЯТЬ ОТ bODY на 50 шагов".Это ты и получил,даун блять
>>202048604Должно. Я не помню объяснение такого поведения, но это описано в спецификации даже.Опять-таки, тебе нужно начать мыслить немного по-другому, не "оттолкнуться от родителя (маргин у дочернего)", а "сдвинуть дочерний элемент (паддинг у родителя)".
>>202048737>Где там у тебя родитель и дочерний?header - родитель, для него и задан цвет фона, а контейнер, для которого задан отступ внутри header.
Подскажите, а есть удобные плагины для вс кода, пхпшторма или атома, чтобы они просто создавали превью css или обязательно нужно лайв поднимать ради этого? Тип если мне больше ничего не нужно кроме html и css
>>202049290Как же рвется этот школотрон, который не смог даже в html. Никто не виноват, что ты такой тупой. Луше почитай это https://html5book.ru , а не рвись итт
>>202049513Я тебе хотел помочь, но соси-ка ты хуй, тупое гавно, которое не может даже в верстке, блять.
>>202047085 (OP)Это называется Выпадание внешних отступов (margin'ов)Если внутри родительского блока расположить блок и задать ему отступ сверху, то внутренний блок прижмется к верхнему краю родительского, а у родительского элемента появится отступ сверху. Т.е. верхний отступ внутреннего элемента «выпадает» из родительского элемента.Если у родительского элемента тоже был задан внешний отступ, то выберется максимальный отступ между собственным и «выпавшим». Чтобы избавиться от эффекта выпадания, можно задать родительскому элементу внутренний отступ (паддинг) сверху или добавить рамку сверху (border-top: 1px solid transparent).Внешние и внутренние отступы всегда складываются.
>>202049591Потому что задал не дочернему, я(другой анон) тебе про это выше уже писал, тупой ты мусорный контейнер блять.header - не является ДОЧЕРНИМ КОНТЙНЕРОМ блять, эгавно ты тупой.Ты если гавно тупой вместо спефицикаций читаешь html5book.ru то ты даже на пиво не заработаешь на фрилансе, в первой же сделке схватишь отриц отзыв и 2ой акк сделать не сможешь, чмо.покидаю тред, ты тупое неблагодарное гавное
>>202049560Тебе уже весь двач написал, что header - это тоже контейнер, родительский по отношению к .container, для которого и задан margin. >хотел помочьНо почему-то только необоснованно пердел, не понимая даже таких элементарных вещей
>>202049630правильно было бы использовать position для родительского элемента, допустим fixed, прибить его и тогда уже марджин не будет выпадать(другой анон)
>>202049709Семен продолжает рваться? <header> <div class="container"> </div> </header>header { background-color: #A13DD5; width: 100vw; height: 100vh;}.container { margin-top: 50px;}Для какого контейнера по отношению к header тут задан margin? Какой из них дочерний, а какой родительский?
>>202049630А в чем сакральных смысл выпадения margin'ов, кому это нужно и зачем так сделали, или это просто баг?
>>202050083можно и absolute, главное понимать как работает.Мне кажется примерно для таких вещей они и созданы
>>202050510не совсем по назначению overflow: auto здесь. Его можно использовать и оно будет работать, я не спорю, но это больше trick использование чем логическое предназначение
