Bug ou absurdité normalisée ?

Le
Gerard Menvussa
Bonjour

Si vous essayez le code suivant dans votre navigateur préféré il y a des
chances que le résultat ne soit pas conforme à ce que défini le style
(marge à 0, padding à 0 les "div" devraient être collés ? Eh bien non).
D'où ma question.

(Pour ceux qui on la flemme de le copier : http://tetraedre.org/bug.html)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Bug ou absurdité normalisée ?</title>
</head>
<style>
h1 {
padding:16px;
}
</style>
<body>
<div style='margin:0; padding:0;
background-color:yellow'><h1>yellow</h1></div>
<div style='margin:0; padding:0; background-color:blue'><h1>blue</h1></div>
<div style='margin:0; padding:0; background-color:red; border:solid 1px
black'><h1>red</h1></div>
<div style='margin:0; padding:0; background-color:green; border:solid
1px black'><h1>green</h1></div>
</body>
</html>


Question subsidiaire : y'a t-il un moyen de signaler les absurdités que
l'on trouve en HTML et CSS ?
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 7
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Bruno Desthuilliers
Le #22028171
Gerard Menvussa a écrit :

Bonjour

Si vous essayez le code suivant dans votre navigateur préféré il y a des
chances que le résultat ne soit pas conforme à ce que défini le style
(marge à 0, padding à 0 les "div" devraient être collés ? Eh bien non).



Tu oublie le margin par défaut du h1. Si tu lui défini un margin à 0,
tes div seront bien collées les unes aux autres.
Olivier
Le #22028161
Gerard Menvussa a écrit, le 09/12/2007 14:04 :

Bonjour

Si vous essayez le code suivant dans votre navigateur préféré il y a des
chances que le résultat ne soit pas conforme à ce que défini le style
(marge à 0, padding à 0 les "div" devraient être collés ? Eh bien non).
D'où ma question.

(Pour ceux qui on la flemme de le copier : http://tetraedre.org/bug.html)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Bug ou absurdité normalisée ?</title>
</head>
<style>
h1 {
padding:16px;
}
</style>
<body>
<div style='margin:0; padding:0;
background-color:yellow'><h1>yellow</h1></div>
<div style='margin:0; padding:0; background-color:blue'><h1>blue</h1></div>
<div style='margin:0; padding:0; background-color:red; border:solid 1px
black'><h1>red</h1></div>
<div style='margin:0; padding:0; background-color:green; border:solid
1px black'><h1>green</h1></div>
</body>
</html>



et en ajoutant "margin:0;" pour le h1, ça donne quoi ?

--
Olivier
- Parce que sinon cela rompt le cours normal de la conversation.
- Pourquoi répond on après la question ?
Patrick 'Zener' Brunet
Le #22028151
Bonjour.

"Bruno Desthuilliers" le message de news: 475bec6f$0$643$
Gerard Menvussa a écrit :
> Si vous essayez le code suivant dans votre navigateur préféré il y a
> des chances que le résultat ne soit pas conforme à ce que défini le
> style (marge à 0, padding à 0 les "div" devraient être collés ? Eh
> bien non).

Tu oublie le margin par défaut du h1. Si tu lui défini un margin
à 0, tes div seront bien collées les unes aux autres.



Tiens, c'est bizarre... et contre-intuitif:
Pourquoi le container div hérite-t-il d'une propriété de son contenu ?
Ou plutôt selon une autre interprétation, pourquoi son background
n'inclut-t-il pas les marges de son contenu ?

--
Cordialement.
--
/**************************************************
* Patrick BRUNET
* E-mail: lien sur http://zener131.free.fr/ContactMe
**************************************************/
Olivier Miakinen
Le #22028121
Le 09/12/2007 14:04, Gerard Menvussa a écrit :

Si vous essayez le code suivant dans votre navigateur préféré il y a des
chances que le résultat ne soit pas conforme à ce que défini le style
(marge à 0, padding à 0 les "div" devraient être collés ? Eh bien non).
D'où ma question.



Si, si, les div sont collés. La question consiste à savoir pourquoi la
couleur de fond remplit la marge du h1 quand il y a une bordure au div
et pas quand elle est absente.

(Pour ceux qui on la flemme de le copier : http://tetraedre.org/bug.html)

[...]



Voici une mise en évidence un peu plus directe du phénomène. Noter que
les valeurs de margin et de padding sur le div n'y ont aucune influence
(chez moi elles sont déjà à 0) mais qu'il faut une marge non nulle à h1
et la présence ou l'absence de bordure au div.

http://www.miakinen.net/vrac/Menvussa/bug.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/st
rict.dtd">
<html>
<head>
<title>Bug ou absurdit&eacute; normalis&eacute;e ?</title>
<style type="text/css">
div {
background-color: yellow;
}
h1 {
padding:16px;
border:solid 1px red;
}
</style>
</head>
<body>
<div><h1>pas de bordure</h1></div>
<div><h1>pas de bordure</h1></div>
<div style='border:solid 1px black'><h1>avec bordure</h1></div>
<div style='border:solid 1px black'><h1>avec bordure</h1></div>
<div><h1 style='margin:0'>pas de bordure, marge 0</h1></div>
<div style='border:solid 1px black'><h1 style='margin:0'>avec bordure,
marge 0</
h1></div>
</body>
</html>
Olivier Miakinen
Le #22028111
Le 09/12/2007 14:04, Gerard Menvussa a écrit :

</head>
<style>
h1 {
padding:16px;
}
</style>
<body>



Avant que j'oublie : ton code est invalide pour deux raisons : la
première est que tu n'as pas mis l'élément style dans l'élément head
mais entre le head et le body ; la seconde que tu as oublié le type
("text/css"). Mais aucune de ces deux raisons n'explique le phénomène
en question.
Olivier Miakinen
Le #22028101
Le 09/12/2007 15:33, Olivier Miakinen a écrit :

Voici une mise en évidence un peu plus directe du phénomène. Noter que
les valeurs de margin et de padding sur le div n'y ont aucune influence
(chez moi elles sont déjà à 0) mais qu'il faut une marge non nulle à h1
et la présence ou l'absence de bordure au div.

http://www.miakinen.net/vrac/Menvussa/bug.html



Un autre exemple :
http://www.miakinen.net/vrac/Menvussa/bug2.html

Il semblerait que le phénomène soit lié à la fusion ou la non fusion des
marges.
Olivier Miakinen
Le #22028091
Le 09/12/2007 15:52, Olivier Miakinen a écrit :

Un autre exemple :
http://www.miakinen.net/vrac/Menvussa/bug2.html

Il semblerait que le phénomène soit lié à la fusion ou la non fusion des
marges.



Visiblement c'est ça. La bordure du div empêche la fusion de la marge du
h1 avec quelque chose en dehors du div, auquel cas la couleur du fond du
h1 s'étend à tout le div.

Voir par exemple comment la marge du deuxième h1 du premier div fusionne
avec celle du premier h1 du deuxième div, alors qu'une marge -- même
transparente -- l'empêche (3e et 4e div):
http://www.miakinen.net/vrac/Menvussa/bug3.html
Olivier Miakinen
Le #22028081
[ repost à cause d'une coquille ]

Le 09/12/2007 15:52, Olivier Miakinen a écrit :

Un autre exemple :
http://www.miakinen.net/vrac/Menvussa/bug2.html

Il semblerait que le phénomène soit lié à la fusion ou la non fusion des
marges.



Visiblement c'est ça. La bordure du div empêche la fusion de la marge du
h1 avec quelque chose en dehors du div, auquel cas la couleur du fond du
h1 s'étend à tout le div.

Voir par exemple comment la marge du deuxième h1 du premier div fusionne
avec celle du premier h1 du deuxième div, alors qu'une bordure -- même
transparente -- l'empêche (3e et 4e div):
http://www.miakinen.net/vrac/Menvussa/bug3.html
Gerard Menvussa
Le #22028071
Bruno Desthuilliers a écrit :
Gerard Menvussa a écrit :

Bonjour

Si vous essayez le code suivant dans votre navigateur préféré il y a
des chances que le résultat ne soit pas conforme à ce que défini le
style (marge à 0, padding à 0 les "div" devraient être collés ? Eh
bien non).



Tu oublie le margin par défaut du h1. Si tu lui défini un margin à 0,
tes div seront bien collées les unes aux autres.



Je n'oublie rien. D'ailleurs comme vous pouvez le lire je définie le
margin du h1 à 16px. Or lorsque j'ajoute simplement un border les div
sont effectivement collés (mais avec un espace en haut et en bas
gigantesque qui n'a rien à voir avec 16px...). Mais les mêmes dib sans
le border et hop les voilà espacés...
Gerard Menvussa
Le #22028061
Olivier a écrit :
Gerard Menvussa a écrit, le 09/12/2007 14:04 :
Bonjour

Si vous essayez le code suivant dans votre navigateur préféré il y a des
chances que le résultat ne soit pas conforme à ce que défini le style
(marge à 0, padding à 0 les "div" devraient être collés ? Eh bien non).
D'où ma question.

(Pour ceux qui on la flemme de le copier : http://tetraedre.org/bug.html)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Bug ou absurdité normalisée ?</title>
</head>
<style>
h1 {
padding:16px;
}
</style>
<body>
<div style='margin:0; padding:0;
background-color:yellow'><h1>yellow</h1></div>
<div style='margin:0; padding:0; background-color:blue'><h1>blue</h1></div>
<div style='margin:0; padding:0; background-color:red; border:solid 1px
black'><h1>red</h1></div>
<div style='margin:0; padding:0; background-color:green; border:solid
1px black'><h1>green</h1></div>
</body>
</html>



et en ajoutant "margin:0;" pour le h1, ça donne quoi ?



Dans ce cas ils sont collés.

Mais comme vous pouvez le voir les troisièmes et quatrième div sont déjà
collés alors que la seule choses qui change c'est qu'ils possèdent un
bord en plus.
Publicité
Poster une réponse
Anonyme