Pourquoi les marges de mes éléments Div se chevauchent-elles et comment puis-je y remédier ?

Marges qui se chevauchent dans les éléments Div

Question :

Pourquoi les marges du div les éléments de mon code se chevauchent, provoquant un regroupement des éléments ?

Code :

<code class="css">.alignright {float: right}
#header .social {margin-top: 50px;}
#header .social a {display: inline-block;}
#header .social .fb {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;}
#header .social .twit {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;}
#header .contact {margin: 20px 70px 20px 0; font-size: 14px; font-weight: bold;}
#header .contact span {color: #FFFFFF;}
#header .search {margin: 10px 0 0;}</code>

<code class="html"><div class="alignright">
    <div class="social">
        <a href="#" class="twit"></a>
        <a href="#" class="fb"></a>
    </div><!-- social -->
    <div class="contact">
        Get in Touch: <span>+44 10012 12345</span>            
    </div><!-- contact -->
    <div class="search">
        <form method="post" action="">
            <input type="text" value="" name="s" gtbfieldid="28">
        </form>
    </div><!-- search -->
</div></code>

Réponse :

Les marges qui se chevauchent sont probablement dues à un phénomène connu sous le nom d'« effondrement des marges ». Cela se produit lorsque la marge inférieure d'un élément et la marge supérieure d'un élément adjacent se combinent pour former une seule marge plus grande.

Dans votre code, la marge inférieure du div .social et la marge supérieure du .contact div s'effondrent, ce qui fait que les éléments apparaissent trop rapprochés.

Selon le W3C, deux marges s'effondrent si elles répondent aux critères suivants :

• Les deux marges appartiennent à des blocs dans le même contexte de formatage de bloc.
• Aucune zone de ligne, aucun espace, aucun remplissage ou bordure ne sépare les marges.
• Les deux marges se trouvent sur les bords de la boîte verticalement adjacents.

Puisque les marges de votre code répondent à ces critères, elles s'effondreront.

Solution :

Il existe plusieurs façons de résoudre ce problème :

• Utilisez le remplissage au lieu des marges. Le remplissage ne s'effondre pas, donc l'utiliser à la place des marges pour les éléments d'espacement évitera le problème.
• Ajoutez clear:both au conteneur parent. Cela créera un nouveau contexte de formatage de bloc, empêchant les marges de s'effondrer.
• Utilisez des flotteurs. Les éléments flottants sont retirés du flux normal, ce qui empêche leurs marges de s'effondrer.

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!