Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Bug ou absurdité normalisée ?

65 réponses
Avatar
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 ?

10 réponses

1 2 3 4 5
Avatar
Bruno Desthuilliers
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.
Avatar
Olivier
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 ?
<http://www.faqs.org/faqs/fr/usenet/repondre-sur-usenet/> merci.
Avatar
Patrick 'Zener' Brunet
Bonjour.

"Bruno Desthuilliers" a écrit dans
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
**************************************************/
Avatar
Olivier Miakinen
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>
Avatar
Olivier Miakinen
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.
Avatar
Olivier Miakinen
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.
Avatar
Olivier Miakinen
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
Avatar
Olivier Miakinen
[ 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
Avatar
Gerard Menvussa
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...
Avatar
Gerard Menvussa
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.
1 2 3 4 5