Pourquoi mes marges de division imbriquées se chevauchent-elles ?

Dépannage du chevauchement de marge dans les divisions imbriquées

Enquête sur le problème de chevauchement

Dans l'extrait de code présenté, il semble y avoir un problème où les marges des divs imbriqués se chevauchent, ce qui entraîne un espacement inattendu. Examinons le HTML et le CSS pour comprendre la cause.

Structure HTML

La structure HTML implique un div parent avec la classe "alignright" qui contient trois div enfants : « social », « contact » et « recherche ». Les marges appliquées à ces divs enfants provoquent le chevauchement.

Déclarations CSS

Les déclarations CSS régissant les marges sont les suivantes :

<code class="css">#header .social {margin-top: 50px;}
#header .contact {margin: 20px 70px 20px 0; font-size: 14px; font-weight: bold;}
#header .search {margin: 10px 0 0;}</code>

Identifier le coupable : les marges effondrées

Les marges qui se chevauchent sont le résultat du phénomène « d'effondrement des marges ». Lorsque deux marges verticalement adjacentes appartiennent à des éléments en ligne ou au niveau du bloc, la plus grande marge est réduite et la plus petite est ignorée. Dans ce cas, c'est la plus grande marge du div « social » (50px) qui réduit les marges des divs « contact » et « recherche ».

Résoudre le problème

Pour éviter l'effondrement des marges, vous pouvez envisager quelques approches :

1. Utilisez les autorisations : Ajoutez des balises
   ou des techniques de correction CSS entre les éléments à introduire dégagement et empêche l'effondrement de la marge.
2. Utiliser un positionnement flottant ou absolu : Supprimez les éléments du flux normal à l'aide d'un positionnement flottant ou absolu. Cela garantit que leurs marges ne s'effondrent pas avec d'autres éléments.

Option alternative

Dans certaines situations, vous souhaiterez peut-être délibérément réduire les marges pour obtenir un espacement spécifique. effets. Pensez à utiliser des marges négatives pour créer de l'espace supplémentaire. Soyez toutefois prudent lorsque vous utilisez des marges négatives, car elles peuvent conduire à des résultats imprévisibles.

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!