Estou tentando entender como o recolhimento de margem se comporta quando um Contexto de Formatação de Bloco (BFC) é introduzido usando overflow: hidden.
Aqui está um exemplo mínimo reproduzível:
.outer {
background: lightblue;
}
.inner {
background: lightgreen;
overflow: hidden; /* Triggers BFC */
margin: 30px;
}
p {
margin-top: 30px;
}<body>
<div class="outer">
<div class="inner">
<p>Paragraph inside a BFC.</p>
</div>
</div>
</body>Pelo que entendi, a configuração overflow: hiddendeve .innercriar um Contexto de Formatação de Bloco, o que evita o colapso de margem entre .innere seu pai .outer.
No entanto, quando inspeciono o layout no Chrome DevTools, parece que a margem superior .innerainda está se recolhendo para cima , fazendo com que pareça .outerter uma margem superior — mesmo que não tenha.
Pergunta:
Por que o colapso de margem ainda ocorre aqui, mesmo que .innerdevesse ser um BFC? Há algo que eu não esteja entendendo?
O BFC funciona estritamente "para dentro", então a margem ("externa") de um elemento que constitui o BFC ainda irá "sangrar" (colapsar), a menos que seu pai também seja BFC.
O BFC somente fará com que as margens dos elementos filhos internos ultrapassem o limite do elemento do BFC, evitando o colapso regular do bloco de margem.
Isso é bem visível no seu exemplo, onde o BFC é apenas o
.innerwrapper: a margem do parágrafo mais interno faz com que o.innerpai se estenda. Se o.innerNÃO tivesse ooverflow: hiddenno seu teste, ele encolheria e deixaria a margem dos parágrafos sangrar/recolher para dentro da sua própria margem, e para fora do.outer, e efetivamente reduziria tudo para:E da mesma forma, se você adicionar extra
overflow: hiddenao.outer, e mantê-lo.innertambém no , você obterá o que provavelmente esperava inicialmente: