Por que esse estilo de margem de CSS não funciona?

Eu tento adicionar valores de margem em uma div dentro de outra div. Tudo funciona bem, exceto o valor máximo, parece ser ignorado. Mas por que?

O que eu esperava:

O que eu ganho:

Código:

#outer {
    	width: 500px; 
    	height: 200px; 
    	background: #FFCCCC;
    	margin: 50px auto 0 auto;
    	display: block;
}
#inner {
    	background: #FFCC33;
    	margin: 50px 50px 50px 50px;
    	padding: 10px;
    	display: block;
}

<div id="outer">
  <div id="inner">
  	Hello world!
  </div>
</div>

O W3Schools não tem explicação para o porquê da margem se comportar dessa maneira.

Você está vendo a margem superior do #innerelemento colapsar na borda superior do elemento#outer elemento, deixando apenas a #outermargem intacta (embora não seja mostrada em suas imagens). As bordas superiores de ambas as caixas estão alinhadas uma com a outra porque suas margens são iguais.

Aqui estão os pontos relevantes da especificação do W3C:

8.3.1 Recolhendo margens

No CSS, as margens adjacentes de duas ou mais caixas (que podem ou não ser irmãos) podem ser combinadas para formar uma única margem. Diz-se que as margens que se combinam dessa maneira entram em colapso e a margem combinada resultante é chamada de margem recolhida .

Margens verticais adjacentes colapsam [...]

Duas margens são adjacentes se e somente se:

• ambos pertencem a caixas no nível de bloco em fluxo que participam do mesmo contexto de formatação de bloco
• sem caixas de linha, sem folga, sem preenchimento e sem borda separá-los
• ambos pertencem a bordas de caixas adjacentes verticalmente, ou seja, formam um dos seguintes pares:
  • margem superior de uma caixa e margem superior de seu primeiro filho em fluxo

Você pode executar um dos seguintes procedimentos para impedir que a margem entre em colapso:

• Faça flutuar um dos seus div elementos
• Faça um dos seus divelementos blocos de linha
• Conjunto overflowde #outerparaauto (ou qualquer valor diferente de visible)

O motivo pelas quais as opções acima impedem o colapso da margem é:

• As margens entre uma caixa flutuante e qualquer outra caixa não caem (nem mesmo entre uma bóia e seus filhos em fluxo).
• 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.
• As margens das caixas de bloco em linha não caem (nem mesmo com seus filhos em fluxo).

As margens esquerda e direita se comportam conforme o esperado, porque:

As margens horizontais nunca caem.

Tente usar display: inline-block;na div interna.

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:inline-block;
}

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:lefta #outerou #inner demo1 .

Observe também que floatisso invalidaria a automargem 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: hiddenem #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: 30pxe uma caixa irmão possui margin-top: 10px. A margem total entre eles é em 30pxvez 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.

Não sei por que o que você tem não funciona, mas você pode adicionar

overflow: auto;

para a div externa

Se você adicionar algum preenchimento #outer, ele funcionará.

Demo

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
    padding-top:1px;
}

Não sei exatamente por que, mas alterar o CSS interno para

display:inline-block;

parece funcionar;

Não responde o "porquê" (deve ser algo com margem em colapso), mas parece que a maneira mais fácil / lógica de fazer o que você está tentando fazer é apenas adicionar padding-topà div externa :

http://jsfiddle.net/hpU5d/1/

Nota secundária - não deve ser necessário definir uma div, a display:block;menos que haja algo mais no seu código que diga para não ser bloqueado.

tente isto:

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:block;
}​

http://jsfiddle.net/7AXTf/

Boa sorte

Eu acho que definir a propriedade position da div #inner para relativa também pode ajudar a alcançar o efeito. De qualquer forma, tentei o código original colado na pergunta no IE9 e no Google Chrome mais recente e eles já dão o efeito desejável sem nenhuma modificação.

Use padding-top:50pxpara div externo. Algo assim:

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}

Nota: o preenchimento aumentará o tamanho da sua div. Nesse caso, se o tamanho da sua div for importante, quero dizer se ela deve ter uma altura específica. diminua a altura em 50px .:

#outer {
    width:500px; 
    height:150px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:table;}

Você já tentou! Importante antes de tudo, forçará tudo:

margin:50px 50px 50px 50px !important;

Apenas para uma solução rápida, tente agrupar os elementos filhos em um divelemento como este -

<div id="outer">
   <div class="divadjust" style="padding-top: 1px">
      <div id="inner">
         Hello world!
      </div>
   </div>
</div>

A margem de innerdiv não entrará em colapso devido ao preenchimento 1pxentre outere innerdiv. Então, logicamente, você terá 1pxespaço extra junto com a margem existente de innerdiv.