Comment fonctionne la réduction des marges en CSS ?

Réduction des marges : une explication

En CSS, la réduction des marges est un comportement qui affecte l'espacement des éléments adjacents sur une page Web.

Comprendre la marge Réduire

Contrairement à la croyance populaire, la réduction des marges ne se produit pas lorsque vous n'avez pas de marges, de remplissage ou de bordures définies sur un élément. Au lieu de cela, cela se produit lorsque deux marges verticales adjacentes sont présentes. Dans de tels cas, la plus grande des deux marges est appliquée, tandis que la plus petite est ignorée.

Exemples de réduction de marge

Considérons l'exemple suivant :

<div>Block A</div>
<div>Block B</div>

Supposons que le bloc A ait une marge inférieure de 3 em et que le bloc B ait une marge supérieure de 2 em. Sans aucun autre style appliqué, l'espacement vertical entre les blocs serait de 3em car la marge inférieure du bloc A est la plus grande des deux.

Empêcher l'effondrement de la marge

Vous pouvez empêcher l'effondrement des marges en ajoutant des bordures ou un remplissage aux éléments adjacents. Cela crée un espace entre les éléments, même si les marges sont définies sur 0.

Par exemple, l'ajout d'une bordure supérieure de 1 px au bloc B entraînerait un espacement vertical de 5 em entre les blocs.

Conclusion

La réduction des marges est un aspect fondamental du style CSS qui affecte l'espacement des éléments sur une page Web. Il est important de comprendre les conditions dans lesquelles la réduction des marges se produit pour créer les mises en page souhaitées et éviter des résultats inattendus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!