Résumé des méthodes pour résoudre le chevauchement des marges CSS

Cet article présente principalement plusieurs solutions pour l'explication détaillée du chevauchement des marges CSS. L'éditeur pense que c'est assez bon. Maintenant, je vais le partager avec vous et vous donner une référence. Suivons l'éditeur pour y jeter un œil

Aujourd'hui, nous avons trié plusieurs façons d'utiliser CSS pour éviter le chevauchement des marges

Supposons d'abord un ensemble de structures dom

<p class="parent">
    <p class="child">
    </p>
</p>

Normalement, si vous définissez une marge pour un élément enfant, cet attribut aura le même effet sur l'élément parent. Cependant,

Ce n'est en fait pas le résultat que nous souhaitons. Nous voulons uniquement définir une marge sur les éléments enfants, alors que devons-nous faire maintenant ?

(1) Définir une bordure à l'élément parent

.parent { 
    width: 300px;       
    height: 300px;
    border: 1px solid #ccc;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

(2) Ajouter un remplissage à l'élément parent. élément parent

.parent {
    padding： 1px;
    width: 300px;
    height: 300px;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

(3) Ajoutez un élément frère avec une largeur et une hauteur au-dessus de l'élément enfant.

<p class="parent">
     <p style="width: 20px;height: 20px;margin-top: "></p>
     <p class="child">
     </p>
</p>

(4) Définissez l'attribut overflow: Hidden; sur l'élément parent

.parent {
    overflow: hidden;
    width: 300px;
    height: 300px;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

(5) Définir display: inline-block pour l'élément enfant (si l'élément enfant est un élément en ligne ou un élément de niveau bloc en ligne, il n'y aura pas de problème de chevauchement de marge )

.parent {
    width: 300px;
    height: 300px;
} 
.child {
    width: 200px;
    height: 200px;
    margin: 20px; 
    display: inline-block;
}

(6) Il existe de nombreuses façons d'y parvenir en détachant les sous-éléments du flux de documents, tels que les éléments flottants, absolus positionnement, etc. Je ne donnerai pas d’explication détaillée ici.

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!