Почему между блочными элементами ничего нету?

Question

[fraqlehver]

Всем драсть, я учу вёрстку и пытаюсь воссоздать один макет.и вот только у меня непонятная ошибка
у меня есть header где вся верхняя часть и снизу section и между ними пустое место. я навожу туда через dev tool и там body
по идее там должно быть продолжение header как тут:


картинка(фоновая) должна продолжатся в этом пустом месте, высоту задал все сделал пытался как то сделать его больше(неправильными способами кажется)
прошу помогите как-то исправить, в голову не лезет что я не так сделал. заранее спасибо
вот код(тут иконки некоторых нету ибо пишу все с локальных файлов, загрузил только фон)

Comments

[fraqlehver]

Извиняюсь что надпись ЧТО ВАС ЖДЕТ... доконца не сделал ибо опираться не на что...

[Сергей delphinpro]

[fraqlehver]

Сергей delphinpro, так я хочу этот текст переместить вниз на 85 пикселей от верхней стороны. даже если убрать то ничего
фотография(фон хедера) все равно меньше самой картинки. вообще должно быть как тут https://vasily1299.github.io/wordpress/
но у меня стрелка уходит из под фона хотя все марджины я писал прямо как в авакоде

[Сергей delphinpro]

fraqlehver, ну сделайте нижний паддинг побольше у блока с фоновой картинкой.

[fraqlehver]

оно никак не влияет

Answer 1

[Антон Антон]

https://habr.com/ru/post/257327/
https://codepen.io/FragsterAt/pen/poKzxaz

Comments

[fraqlehver]

я прочитал статью и глянул видео про это, но все равно не понял в чём причина. в вашей версии результат всё тот же поскольку если добавить иконки то нижняя иконка(там в самом внизу стрелка вниз) продавливается вниз(вне фона)
сам фон будто обрезан. можете обьяснить в чём моя ошибка если вы поняли....

[Антон Антон]

Проблема в вопросе в том, что margin у .about-writers вываливается в родителей

если добавить иконки то нижняя иконка(там в самом внизу стрелка вниз) продавливается вниз(вне фона)

Куда добавить? что продавливается? скорее всего это другая проблема - следствие

[fraqlehver]

нихрена не понял, но спасибо

[Антон Антон]

fraqlehver, я про фиксированную высоту у .head, достаточно поменять height на min-height

[fraqlehver]

сработало...
можете обьяснить почему сработало в чём различие. я час парил голову уже 8 часов так сижу

[Антон Антон]

fraqlehver, про высоту - внимательно посмотрите на картинку в моем комментарии (кстати на узких мониторах в вашем коде будет такая же проблема, вроде бы)
про белое пространство из начального вопроса - я написал прям в ответе ссылку на теоретическую базу этого и есть несколько способов "борьбы", - добавление границы, замена margin на padding, указание overflow или display: flex/inline-block/etc. эти все способы описаны уже миллион раз.

[fraqlehver]

при overflow оно как-то не поменялось. а опыта на остальное у меня мало(считай 1 день учу)
огромное вам спасибо извините что надоел вам