Comment puis-je empêcher l'effondrement de la marge CSS sans affecter l'apparence de la mise en page ?

Remplacer l'effondrement des marges en CSS

L'effondrement des marges est une fonctionnalité CSS qui fusionne les marges adjacentes en une seule marge plus grande. Cela peut être problématique pour les mises en page qui reposent sur des marges parfaites au pixel près.

Éviter la réduction avec des éléments supplémentaires

Les didacticiels CSS suggèrent généralement d'ajouter des bordures ou un remplissage pour interrompre la réduction. Cependant, ces solutions introduisent des effets visuels indésirables.

Fixation d'espacement invisible

Pour éviter ces effets secondaires, pensez à utiliser un élément d'espacement invisible. Cet élément peut être réalisé avec :

<div>

Cette entretoise empêche l'effondrement de la marge en créant une discontinuité de taille nulle entre les éléments.

Exemple

Le code HTML suivant montre comment utiliser l'espaceur :

    
        <div>

Ce code affichera trois éléments avec Marges de 100 px, sans réduire les marges entre elles.

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!