Pour quelle raison les règles d’effondrement de la marge ont-elles été introduites dans CSS?

Question

Je ne peux tout simplement pas comprendre la situation où cet ensemble intelligent de règles peut être utile. Ils brisent la simplicité du modèle de boîte et fournissent une source infinie de problèmes lorsque vous combinez différents éléments de mise en page. Alors, quelle est la raison?

Règles pour la référence.

Mise à jour: les règles sont assez logiques pour les éléments frères, mais pourquoi les marges doivent-elles se propager aux éléments parents jusqu'à l'arbre? Quel genre de problèmes qui 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>

Les divs du plus haut niveau sont espacés les uns des autres de 100 pixels.

Answer 1

C’est l’une des situations où cela n’a pas vraiment de sens tant que vous n’allez pas réaliser 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 "rembourrage extérieur". qui entoure chaque élément. Si deux éléments avec une marge de 20 pixels sont côte à côte, la distance qui les sépare est de 20 pixels et non de 40 pixels.

Comme la marge est une distance par rapport à un autre élément, il est donc logique que la distance se situe entre l'élément et les éléments environnants, pas avec la limite de l'élément parent.

Si la marge était comptée jusqu'à la limite de l'élément parent, le fait de 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 ne marge ou rembourrage. Les marges autour d'un élément doivent rester les mêmes si vous ajoutez un div non-stylé 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 un margin-top et un margin-bottom . Vous voulez une marge en haut et en bas de l'article et entre différents éléments.

Avec la réduction des marges, vous pouvez ne pas définir de marges spéciales sur le premier ou le dernier élément (PAS une partie de la spécification CSS originale!) ni remplir le conteneur.

Mais je suis d'accord, dans l'ensemble, c'est une fonctionnalité inutile.

Answer 3

Considérons un corps de texte contenant plusieurs paragraphes. Vous souhaitez que chaque paragraphe soit séparé par 2em et que le premier paragraphe soit séparé du contenu précédent par 2em et que le dernier paragraphe soit séparé du contenu suivant par 2em.

Ceci est facilement réalisable avec les CSS suivants, car les marges supérieure et inférieure séparant les paragraphes seront réduites:

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

Si les marges ne se réduisent pas, les marges seront séparées par un espace de 4em et non de 2em. Sans réduction des marges, le seul moyen d'obtenir l'effet souhaité serait de définir des règles supplémentaires pour les premier et dernier paragraphes, ce qui impliquerait de leur attribuer une classe ou un identifiant (à conserver si le texte devait être modifié). , ou en les enveloppant dans un élément supplémentaire inutile et en utilisant: first-child et: last-child, ou ... eh bien, vous voyez l'idée.

Je peux garantir que, si la marge ne se réduisait pas, SO aurait beaucoup de questions en double demandant des solutions de contournement pour obtenir l'espacement cohérent fourni par la règle ci-dessus: -)