Aller au contenu

marge qui diminue alors qu'elle devrait augmenter


mathmax

Sujets conseillés

Bonjour,

Voilà, j'ai un bug très bizarre (avec IE6) : quand je diminue la margin-top de h3 dans le code ci dessous, celle-ci augmente graphiquement:

<style>
h3 {
margin-top:32px; /*changer 31px par 32px : la marge est plus grande !?*/
clear:left;
}

p {
margin:0;
}

.image {
width:100px;
height:70px;
background-color:green;
float:left;
}
</style>
</head>

<body>

<div class="image"></div>
<p>fsd jkldfj klkj</p>
<p>fd jksdj klgj kl</p>

<h3>ce titre à une margin-top de 32px</h3>

</body>
</html>

cliquer ici pour voir le test quand h3 à une margin-top de 32px

cliquer ici pour voir le test quand h3 à une margin-top de 31px

Sauriez-vous m'éxpliquer l'origine de ce bug ?

Lien vers le commentaire
Partager sur d’autres sites

Bonjour,

A mon sens, ceci est dû au "clear:left;".

En effet lorsque tu es en margin de 32px tu dois arriver pile au bon endroit alors qu'en 31 tu en deça de l'espace de saut donc l'espace en 31 est calculé à partir du "clear", tandis qu'en 32 de margin le "clear" n'est pas pris en compte car tu es au delà de la zone desservie par le float.

Tu auras cet effet de saut de margin-top : 0 à 31 et un positionnement correct à parir de >=32

Pour vérifier ce que je te dis, je sais ce n'est pas très clair... Réduis la taille du texte de tes <p> tu verras même en 32 tu auras le saut :P

Edit : j'ai oublié de proposer une solution lol

-> Vire le margin-top le texte sera bien positionné sous l'image

Modifié par Valki
Lien vers le commentaire
Partager sur d’autres sites

Oui merci, c'est clair que c'est ça !

Par contre je ne peux pas me permettre de virer la margin-top des titres car je ne veux pas qu'ils collent trop à l'image.

Je vais tout simplement insérer un <hr /> au dessus du titre, sans marge, invisible et en clear:left. Ca résoudra le problème. :)

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...