div float:left ajoute une sorte de padding !? - Page 1

1

Le 30/12/2010 à 22:31

Salut,
Je fais une petite page, là, et je suis étonné de voir que les navigateurs ajoutent une sorte de padding-top à l'intérieur d'un div affiché en float:left.

du genre

<div style="float:left;background-color:red"><h1>padding au dessus #hum#</h1></div>

<div style="background-color:red"><h1>pas de padding au dessus, tout parait "normal"#hehe#</h1></div>

Ça vous dit quelque chose ?

merci d'avance

PS : je vais vérifier mon test case, j'ai tapé ça de tête

PS :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
a uniformisé le comportement entre IE8 et FF3.6, mais pas dans le sens que j'espérais

(le rendu n'est plus bon sur aucun des deux

)

3

Le 30/12/2010 à 22:37

bon le test case a l'air concluant, et en plus il y a une sorte de padding en dessous aussi.

4

Le 30/12/2010 à 22:38

Ca me dit quelque chose, mais comme ça date (j'ai arrêté mes styles pour ce que j'ai en cours il y a au moins 6 mois, et j'ai tendance à effacer ça assez vite de ma mémoire

5

Le 30/12/2010 à 22:38

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div style="background-color:red"><h1>padding au dessus #hum#</h1></div> 
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div style="float:left;background-color:red;padding:none;margin:none;"><h1>padding au dessus #hum#</h1></div> 
</body>
</html>

6

Le 30/12/2010 à 22:39

Nil (./4) :
j'ai tendance à effacer ça assez vite de ma mémoire ).

Comme je te comprends !

Moi j'ai arrêté ces conneries il y a des années, et en fait... Je m'en portais aussi bien

(Enfin là c'est juste un petit truc perso en passant, donc ça va

)

7

Le 30/12/2010 à 22:51

Bon, Souane m'indique qu'à priori display:inline; sur le H1 corrige le problème de padding sur le div (ou de marge sur le h1 ?).
Je continue...

8

Le 30/12/2010 à 22:58

Bon, ben visiblement en donnant une marge de 0px sur le H1 ça fonctionne. Mais pas en lui donnant une margin:none

C'est pas standard margin:none ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div style="float:left;background-color:red;position:static;">
	<h1 style="margin:none;">fonctionne pas</h1>
</div> 
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div style="float:left;background-color:red;position:static;">
	<h1 style="margin:0px">fonctionneh1>
</div> 
</body>
</html>

9

Le 30/12/2010 à 23:01

Bon, ben hop, merci Souane !
Si tu as une explication au lieu de tout garder pour toi comme dh'abitude, hein !!

(quand même, ça m'intéresserait de savoir en quoi c'est intuitif — je n'en demande pas tant

— logique de changer les marges d'un élément imbriqué selon la méthode utilisée pour positionner le parent...

)

10

Le 30/12/2010 à 23:38

Pen^2 (./8) :
C'est pas standard margin:none ?

Je ne crois pas, en tout cas je ne l'ai jamais vu (ce qui veut dire que ça n'est pas standard

)... en général, je préfère un bon margin:0;

11

Le 30/12/2010 à 23:41

Ah ? Dans mes souvenirs c'était ça pourtant. Mais bon.

12

Le 30/12/2010 à 23:48

Margin:none n'est pas valable.

Pour le margin, cela se produit quand tout element block en float comprend direct un autre element block possedant un margin top

De memoire, y a aussi le pb avec margin bottom dans certains cas

De plus, comme souvent les margins et paddings par defaut ne sont pas les memes d'un navigateur a l'autre il faut tjrs utiliser un css de cleanup qui remet tout ca d'aplomb et evte d'avoir ce genre de pb.

Ancien pseudo : lolo

13

Le 31/12/2010 à 00:02

Tu as changé de pseudonyme, Souane ? On t'a reconnue

14

Le 31/12/2010 à 00:08

Oué, t'es pas très discrète

(Merci en tout cas ! Cela dit je ne comprends toujours pas la logique d'ajouter un margin dans ce cas précis.)

15

Le 31/12/2010 à 00:54

En fait si je me souviens bien la marge (contrairement au padding) fusionne avec celle de l'élément parent *mais seulement dans certains cas* et c'est assez tordu (en gros il faut regarder la liste des cas, c'est pas évident à retenir). Bon voilà j'ai retrouvé le lien : http://www.w3.org/TR/CSS21/box.html#collapsing-margins

C'est donc le deuxième point qui s'applique dans ton cas : Vertical margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).

(et en fait aussi le quatrième : Vertical margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.)

il doit y avoir des raisons techniques je suppose...

Enfin bref quand ça fusionne ("collapse") pas ça fait que les deux marges s'additionnent au lieu de se superposer, donc ton texte est plus bas.

« Le bonheur, c'est une carte de bibliothèque ! » — The gostak distims the doshes.
Membrane fondatrice de la confrérie des artistes flous.
L'univers est-il un dodécaèdre de Poincaré ?
(``·\ powaaaaaaaaa ! #love#

16

Le 31/12/2010 à 01:11

Moué, #CSS# quoi

C'est quand même pas joyeux tout ça

Merci beaucoup en tout cas.