Por que razão margem regras colapso foram introduzidas no CSS?
Pergunta
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.
Solução
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.
Outras dicas
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.
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: -)