28234 sujets

CSS et mise en forme, CSS3

Margin-top

Bonjour,

Je ne comprends pas ce comportement :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"> 
<!--
body {margin : 0; padding : 0}
.conteneur {
width: 100%; 
height: 400px; 
background-color: #eef;} 
.radio {
margin : 10px;  
width: 222px; 
height: 300px; 
background-color: #0000CC; } 
--> 
</style>
</head>

<body>
<div class="conteneur">
<div class="radio"> </div>
</div>
</body>
</html>


Pouvez vous me dire pourquoi est ce que j'ai une marge aussi sur le conteneur ???
merci.
Modifié le 02 Feb 2005 - 14:02
Administrateur
krek a écrit :

Pouvez vous me dire pourquoi est ce que j'ai une marge aussi sur le conteneur ???

Je ne vois pas de marge sur le conteneur.
Chez moi, le bloc "radio" est décalé de 10px à l'intérieur de "conteneur". C'est le comportement souhaité je suppose.
salut,
Oui c'est le comportement souhaité.
J'ai aussi des différences d'interpretation entre firefox et mozilla ...
Je ne comprends pas pourquoi ... Smiley ohwell
C'est le principe de fusion des marges.

En l'absence de bordures et d'espacements interne (padding) sur le bloc "conteneur", les marges du bloc "radio" fusionnent avec celle du bloc "conteneur".

On se retrouve donc avec un margin-top et un margin-bottom de 10 pixels sur le bloc "conteneur" et un margin-top et margin-bottom de 0 sur le bloc "radio" (La fusion de marges ne s'applique qu'aux marges verticales et non aux marges latérales).

L'autre cas où cette fusion se produit est pour les blocs qui se suivent simplement:


<div></div>
<div></div>

div { margin: 15px; }


L'espacement entre les deux DIV sera de 15 pixels et non 30 pixels (La valeur la plus grande entre les deux marges en contact est retenue).

http://www.yoyodesign.org/doc/w3c/css2/box.html#collapsing-margins
http://www.w3.org/TR/CSS21/box.html#collapsing-margins (CSS 2.1 donne plus de détails)

J'avais commencé un article sur ce mécanisme il y a un bon moment. je devrais peut-être le finir maintenant que j'y repense.
Modifié le 02 Feb 2005 - 21:15
Bobe a écrit :
J'avais commencé un article sur ce mécanisme il y a un bon moment. je devrais peut-être le finir maintenant que j'y repense.

C'est peut-être la bonne occasion Smiley lol
Bé alors ....
Pourquoi un jour c'est 10+10 = 20 et le lendemain 10+10 = 30 ?
Un nouveau tour de passe passe des css qui le lundi interprète
d'une manière et le mardi d'une autre ?
Et qu'est-ce que les css 2 ont à voir la dedans ???
Puis c'est quoi les css 2 au fait ?
bien à tous.
Sujet clos
Aller à