Quel est l'intérêt de la réduction des marges CSS?

Question

Le modèle de boîte CSS2 nous dit que les marges adjacentes se réduisent .

Je trouve cela assez gênant d’être la source de nombreux bugs de conception. J'espère qu'en comprenant l'objectif de la réduction des marges, je comprendrai quand les utiliser et comment les éviter quand elles ne sont pas nécessaires.

Quel est le but de cette fonctionnalité?

Answer 1

Le sens général de "marge" n'est pas de transmettre "déplacer ce fil par 10px" mais plutôt, "il doit y avoir 10px d'espace vide à côté de cet élément."

J'ai toujours trouvé que c'est plus facile à conceptualiser avec les paragraphes.

Si vous venez de donner des paragraphes margin-top: 10px et n'avait pas de marge sur les autres éléments, une série de paragraphes espacés magnifiquement. Mais bien sûr, vous auriez un problème lors de la passation d'un autre élément en dessous d'un paragraphe. Les deux touch.

Si les marges ne s'effondre pas, vous feriez hésitez pas à ajouter margin-bottom: 10px de votre code précédent, parce que toute paire de paragraphes obtenir espacés de 20px à part, tandis que les paragraphes distincts à partir d'autres éléments que de 10px.

Donc, les marges s'effondrer. En ajoutant des marges supérieure et inférieure de 10px vous êtes en train de dire, "je n'aime pas ce que marge des règles que tous les autres éléments ont. Je demande au moins 10px de remplissage au-dessus et au-dessous de chacun de mes paragraphes."