Marges de réduction CSS : à quoi servent-elles ?

Question

Le modèle de boîte CSS2 nous indique que les marges verticales adjacentes s'effondreront.

Je trouve cela très ennuyeux car c'est la source de nombreuses erreurs de conception. J'espère qu'en comprenant le but de la réduction des marges, je comprendrai quand les utiliser et comment les éviter lorsqu'elles ne sont pas nécessaires.

Quel est le but de cette fonctionnalité ?

Answer 1

La signification générale de « marge » n'est pas de transmettre « déplacez-le de 10 px » mais plutôt « il doit y avoir 10 px d'espace blanc à côté de cet élément

».

J'ai toujours trouvé que c'était le plus simple à conceptualiser en paragraphes.

Si vous spécifiez margin-top: 10px uniquement pour les paragraphes et aucune marge sur les autres éléments, une série de paragraphes sera joliment espacée. Mais bien sûr, vous rencontrerez des problèmes lorsque vous placerez un autre élément sous le paragraphe. Les deux se toucheront.

Vous hésiteriez à ajouter margin-bottom: 10px au code précédent si les marges n'étaient pas réduites, car alors n'importe quelle paire de paragraphes serait espacée de 20 px, alors que les paragraphes ne seraient qu'à 10 px des autres éléments.

Les marges verticales vont donc s'effondrer. En ajoutant 10 pixels de marge supérieure et inférieure, vous dites : "Je me fiche des règles de marge pour les autres éléments. J'ai besoin d'au moins 10 pixels de remplissage au-dessus et en dessous de chaque paragraphe."