Pour quelle raison les règles de réduction de marge ont-elles été introduites dans CSS?

Question

Impossible de comprendre la situation lorsque cet ensemble intelligent de règles peut être utile. Ils cassent la simplicité du modèle de boîte et fournissent la source infinie de problèmes quand vous combinez différentes pièces de disposition ensemble. Alors, quelle est la raison?

Rules pour la référence. Mise à jour: Les règles sont assez logiques pour les éléments frères, mais pourquoi les marges devraient se propager aux éléments parents jusqu'à l'arbre? Quel genre de problèmes cela résout?

Par exemple:

<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> 

divs niveau haut sont espacées les unes des autres par 100px.

Answer 1

C'est l'une des situations où cela n'a vraiment pas de sens jusqu'à ce que vous réalisiez que les alternatives ont moins de sens.

Comme vous le savez probablement, les marges spécifient la distance entre les éléments, ce n'est pas un "remplissage externe" qui entoure chaque élément. Si deux éléments avec la marge 20px sont côte à côte, la distance entre eux est 20px, pas 40px. Comme la marge est une distance à un autre élément, il est logique que la distance soit de l'élément aux éléments environnants, et non à la limite de l'élément parent. Si la marge est comptée à la limite de l'élément parent, placer des éléments dans un élément div introduirait un espacement supplémentaire entre les éléments, même si le div lui-même n'a pas de marge ou de remplissage. Les marges autour d'un élément doivent rester les mêmes si vous ajoutez un div non-délimité autour de lui.

Answer 2

Quand cela pourrait-il être utile?

L'exemple le plus simple: une liste de paragraphes et d'en-têtes, chacun avec margin-top et margin-bottom. Vous voulez une marge sur le haut et le bas de l'article, et entre différents éléments. Avec l'effondrement de marge, vous pouvez faire sans définir des marges spéciales sur le premier ou le dernier élément (PAS une partie de la spécification CSS d'origine!) Ou rembourrer le conteneur.

Mais je suis d'accord, dans l'ensemble, c'est une fonctionnalité inutile. Considérons un corps de texte contenant plusieurs paragraphes.

Answer 3

Vous voulez que chaque paragraphe soit séparé par 2em, et vous voulez que le premier paragraphe soit séparé du contenu précédent par 2em, et le dernier paragraphe soit séparé du contenu suivant par 2em.

Ceci est facilement accompli avec le CSS suivant, parce que les marges supérieure et inférieure séparant les paragraphes s'effondreront:

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

Si les marges ne se sont pas effondrés, cela se traduirait par les marges étant séparées par un espace de 4em, pas 2em. Sans effondrement des marges, la seule façon d'obtenir l'effet désiré serait d'établir des règles supplémentaires pour le premier et le dernier paragraphe, ce qui impliquerait de leur donner une classe ou un identifiant (qui devrait être conservé si le texte était altéré) ou en les enveloppant dans un élément supplémentaire inutile et en utilisant: first-child et: last-child, ou bien ... vous avez l'idée.

Je peux vous garantir que, si la marge effondrement ne se produit pas, SO aurais beaucoup de questions en double demandant des solutions de contournement pour obtenir l'espacement uniforme que la règle ci-dessus fournit :-)