<html>
<div style="width:200px;">
<div style="background:red;height:5px"></div>
<div style="background:yellow">
Magnets?
</div>
<div style="background:green;height:5px"></div>
</div>
</html>
Rendering with "Magnets?" wrapped in h3 tagsPourquoi ces divs se repoussent-ils?
Comment se fait le cessez divs être contiguë "aimants?" est enveloppé dans un paragraphe ou une balise d'en-tête?
Les éléments avec lesquels vous êtes enveloppés ont probablement des marges par défaut.
Vous devez mettre à zéro les marges sur le h3 ou p.
<html>
<div style="width:200px;">
<div style="background:red;height:5px"></div>
<div style="background:yellow">
<h3 style="margin:0px;">Magnets?</h3>
</div>
<div style="background:green;height:5px"></div>
</div>
</html>
Si vous voulez garder la marge sur la h3 et d'autres éléments, vous devez résoudre le problème des marges des éléments au sein de la div effondrement. Il y a plusieurs façons de résoudre ce:
Le lien suivant fournit plus d'informations:
http://www.complexspiral.com/publications/uncollapsing-margins/
Merci pour la réponse! La solution fonctionne, mais la marge de l'en-tête ne devrait-elle pas l'abaisser par rapport au remplissage de son div parent? –
Lire les messages suivants pour plus d'informations sur le rembourrage et les marges: http://www.complexspiral.com/publications/uncollapsing-margins/ http://www.goer.org/HTML/intermediate/margins_and_padding/ –
@Terminal Les problèmes est avec des marges qui s'effondrent. Lisez le premier lien que j'ai fourni dans le commentaire ci-dessus pour plus d'informations à ce sujet. Pour le réparer, vous pouvez soit placer un padding 1px sur la div principale ou lui donner une bordure. Cela vous permettra de conserver la marge sur le h3 et d'avoir la couleur de fond englobant l'élément entier. –
Merci! Définir les marges par défaut à 0 fonctionne, mais pourquoi la div ne s'étend pas avec le contenu? –