marge qui diminue alors qu'elle devrait augmenter

mathmax · 6 Novembre 2005

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 ?

Valki · 6 Novembre 2005

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

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

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

Modifié 6 Novembre 2005 par Valki

mathmax · 7 Novembre 2005

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.

Valki · 7 Novembre 2005

Hello,

Le mieux c'est de mettre le margin à l'image

Bonne continuation !

Connexion

marge qui diminue alors qu'elle devrait augmenter

Sujets conseillés

mathmax

Valki

mathmax

Valki

Veuillez vous connecter pour commenter

Parcourir

Activité