O que o @BoltClock mencionado é bastante sólido. E aqui eu só quero adicionar várias outras soluções para esse problema. verifique esta margem w3c_collapsing . As partes verdes são o pensamento potencial de como esse problema pode ser resolvido.
Solução 1
As margens entre uma caixa flutuante e qualquer outra caixa não caem (nem mesmo entre uma bóia e seus filhos em fluxo).
isso significa que posso adicionar float:left
a #outer
ou #inner
demo1 .
Observe também que float
isso invalidaria a auto
margem de entrada.
Solução 2
As margens de elementos que estabelecem novos contextos de formatação de bloco (como flutuadores e elementos com 'estouro' diferente de 'visível') não entram em colapso com seus filhos em fluxo.
outro que não seja visible
, put Vamos overflow: hidden
em #outer
. E esse caminho parece bem simples e decente. Eu gosto disso.
#outer{
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto;
overflow: hidden;
}
#inner {
background: #FFCC33;
height: 50px;
margin: 50px;
}
Solução 3
As margens das caixas absolutamente posicionadas não caem (nem mesmo com seus filhos em fluxo).
#outer{
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto;
position: absolute;
}
#inner{
background: #FFCC33;
height: 50px;
margin: 50px;
}
ou
#outer{
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto;
position: relative;
}
#inner {
background: #FFCC33;
height: 50px;
margin: 50px;
position: absolute;
}
esses dois métodos interromperão o fluxo normal de div
Solução 4
As margens das caixas de bloco em linha não caem (nem mesmo com seus filhos em fluxo).
é o mesmo que @enderskill
Solução 5
A margem inferior de um elemento em nível de bloco em fluxo sempre cai com a margem superior de seu próximo irmão em nível de bloco em fluxo, a menos que esse irmão tenha folga.
Isso não tem muito trabalho a ver com a questão, pois é a margem em colapso entre os irmãos. geralmente significa se uma caixa superior possui margin-bottom: 30px
e uma caixa irmão possui margin-top: 10px
. A margem total entre eles é em 30px
vez de40px
.
Solução 6
A margem superior de um elemento de bloco em fluxo entra em colapso com a primeira margem superior da criança em nível de bloco em fluxo, se o elemento não tiver borda superior, preenchimento superior e a criança não tiver folga.
Isso é muito interessante e posso apenas adicionar uma linha de borda superior
#outer{
width: 500px;
height: 200px;
background: #FFCCCC;
margin: 50px auto;
border-top: 1px solid red;
}
#inner {
background: #FFCC33;
height: 50px;
margin: 50px;
}
E também <div>
é o nível de bloco no padrão, assim você não precisa declarar isso de propósito. Desculpe por não poder postar mais de 2 links e imagens devido à minha reputação de iniciante. Pelo menos você sabe de onde vem o problema da próxima vez que vir algo semelhante.