Отрицательный margin дочернего элемента изменяет размер родительского блока — как исправить?

Question

[Михаил Оловянников]

Нужно сделать штуку - чтобы один текст немного наезжал на другой, но при этом не менял размер родительского блока (ибо блоки выравниваются через align-items). Абсолютным позиционированием пользоваться не хочу. Подскажите - как это сделать правильно без костылей на подобии - добавлять параграфу c отрицательным margin нижний padding до тех пор, покуда родительский блок не станет нужного размера.

Answer 1

[Александр]

header > div:not(:first-child) {
    width: calc(100% - 36%);
    padding: 68px 0 68px 48px;
    border-left: 14px solid #fecb00;
    background-color: #ebebeb;
}

h1, p {
    margin: 0;
}

Comments

[imko]

(100% - 36%) ? :D

[Александр]

imko, Взято из примера автора. Открыли бы.

[Михаил Оловянников]

Александр, а если есть нужда к тому, чтобы стилизация (серого фона и желтого border со всеми отступами) была именно у тега h1? Просто в родительском div (где h1 и p) могут быть и другие элементы и при этом стилизация не должна растягиваться на весь div. Возможно ли это сделать так, чтобы отрицательный margin у элемента p все же остался, но при этом родительский div имел нормальный размер, то есть такой какой он у вашего примера.

[Александр]

Михаил Оловянников, в чем проблема использовать несколько дивов с разными классами?

[Михаил Оловянников]

Александр, да, немного экспериментов и получилось используя ваш совет. Благодарю за помощь.)