Почему при убирании границы background сужается и сверху появляется большая незаполненная область?

Question

[Aleksey111]

По идее дело в:
.inner_banner > h1 {
margin: 135px 0 20px 0;
text-align: center;
font-size: 57px;
text-transform: uppercase;
}

Но ведь отступ должен происходит от верхней границы внутреннего блока, в котором и лежит h1.
Из-за чего это?

Comments

[Aleksey111]

https://github.com/aleks70694/aleks70694.github.io...

[Aleksey111]

Aleksey111: aleks70694.github.io/task2/index.html

Answer 1

[tema_sun]

Margins collapsing
https://www.sitepoint.com/web-foundations/collapsi...

Вместо border можно использовать padding-top: 1px;

Comments

[Aleksey111]

а с чем он схлопывается? с margin: 0 auto?

[Aleksey111]

это ведь не схлопывание явно

[tema_sun]

Aleksey111: а что тогда? Это выглядит как схлопывание, ведет себя как схлопывание и устраняется методами устранения схлопывания. Есть другие идеи?

[Aleksey111]

tema_sun: разве схлопывание это не та ситуация, когда на сторону воздействует несколько margin, и больший заменяет собой меньший? там ведь margin только один.

[Aleksey111]

tema_sun: https://yadi.sk/i/VOe14V9O3CrtDC

[Ankhena]

Aleksey111: Схлопывается с родительским и "отодвигает" родителя.

[tema_sun]

Aleksey111: h1 схлопывается с inner_banner, inner_banner с shell_banner. Т.к. схлопнутые отступы заканчиваются за пределами родительского элемента, то h1 это все двигает вниз.