Por que uma margem inferior negativa em um elemento diminui a altura do pai desse elemento?
Isso pode ser devido ao recolhimento de margem e eu sei sobre o recolhimento de margem, pelo menos como isso afeta elementos adjacentes, mas eu não entendo como ele funciona em elementos aninhados quando as margens negativas estão envolvidas.
Por exemplo, nesta marcação e CSS acompanhante:
Marcação<div class="parent">
<div class="child">
Child 1
</div>
</div>
<div class="parent">
<div class="child negative">
Child 1
</div>
</div>
CSSbody {
background: white;
padding: 45px;
}
.parent {
border: 1px solid black;
margin-bottom: 10px;
}
.negative {
margin-bottom: -1px;
}
Exemplo ao vivoAqui.
Quando eu inspecionar a altura do segundo.parent
div, noto que é 1 pixel a menos que o primeiro. Isso aconteceu por causa da margem negativa no.negative
elemento dentro dele. Eu dei uma rápida olhada no W3C e não consegui encontrar uma explicação para esse comportamento.
Alguém poderia explicar o que está acontecendo aqui e também me fornecer um link para a seção de especificações do W3C?