Por que razão margem regras colapso foram introduzidas no CSS?

Question

Apenas não consigo descobrir a situação quando este conjunto inteligente de regras pode ser útil. Eles quebram a simplicidade do modelo de caixa e fornecer fonte infinita de problemas quando você combinar diferentes peças de disposição juntos. Então, qual é a razão?

Regras para a referência.

Atualização: As regras são bastante lógico para elementos irmãos, mas por margens devem propagar a mãe elementos até a árvore? Que tipo de problemas que resolve?

Por exemplo:

<div style="margin: 20px; background-color: red;">
    <div style="margin: 20px;">
        <p style="margin: 100px;">red</p>
    </div>
</div>
<div style="margin: 20px; background-color: blue;">blue</div>

Topo divs nível são espaçadas uma da outra por 100 p.

Answer 1

Esta é uma das situações em que não faz muito sentido até você perceber que as alternativas não fazer mais sentido.

Como você provavelmente sabe, as margens de especificar a distância entre os elementos, não é um "padding exterior" que envolve cada elemento. Se dois elementos com a margem 20px estão ao lado do outro, a distância entre eles é 20px, não 40px.

Como a margem é um raio de um outro elemento, faz sentido que a distância é a partir do elemento para os elementos circundantes, não para o limite do elemento pai.

Se a margem seria contado para o limite do elemento pai, colocando elementos em um elemento div introduziria extra espaçamento entre os elementos mesmo admitindo que o próprio div não tem margem ou estofamento. As margens em torno de um elemento deve permanecer a mesma se você adicionar um div sem estilo em torno dele.

Answer 2

Quando se poderia ser útil?

O exemplo mais simples: uma lista de parágrafos e títulos, cada um com uma margin-top e margin-bottom. Você quer uma margem na parte superior e inferior do artigo, e entre diferentes elementos.

Com margem de colapso, você pode fazer sem definir margens especiais no primeiro ou último item (não é uma parte da especificação CSS original!) Ou preenchimento do recipiente.

Mas eu concordo, em um todo, é um recurso inútil.

Answer 3

Considere um corpo de texto que contém vários parágrafos. Você quer que cada parágrafo deve ser separados por 2em, e você quer que o primeiro parágrafo para ser separado do conteúdo anterior por 2em, eo último parágrafo a ser separado do seguinte conteúdo por 2em.

Este é facilmente realizado com o seguinte CSS, porque o margens superior e inferior que separam os parágrafos entrará em colapso:

p {
    margin-top: 2em
    margin-bottom: 2em;
}

Se as margens não entrou em colapso, isso resultaria em margens de ser separados por um espaço de 4EM, não 2em. Sem margem de colapso, a única maneira de alcançar o efeito desejado seria a criação de algumas regras adicionais para o primeiro e último parágrafos, o que implicaria dando-lhes uma classe ou id (que teria que ser mantida se o texto já foi alterado) ou envolvê-los em um elemento extra de outra forma-desnecessária e usando: first-child e:. last-child, ou ... bem, você começa a idéia

Eu posso garantir que, se não ocorrer margem de colapso, SO teria um monte de perguntas duplicadas pedindo soluções alternativas para alcançar o espaçamento consistente que a regra acima fornece: -)