Discussion :

[JefReb]

Bonjour à tous,
Si ce n'est pas un bug, je cherche une explication simple et claire du phénomène suivant.
Soit les classes css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.b1, .b2, .b3 	 { width:212px; height:100px; margin:0px; padding:0px;
                            background-color:yellow; }
.b2 	                 { overflow:hidden; }
.b3 	                 { border:1px solid green; }
 
.boite	 { width:150px; height:auto; margin:20px; padding:10px; 
            background-color:red; border:1px solid  black;}
.bloc 	 { width:auto; height:auto; margin:0px auto; padding:0px; 
            background-color:white;}

Et le code html suivant:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="b1"> 
    <div class="boite"> 
       <p class="bloc">Contenu<br />blablabla</p> </div>
    </div>

Avec class="b1" la boite class="boite" en bordure noire, le margin-top de 20px n'est pas exécuté!

Avec class="b2" (overflow:hidden la boite class="boite" en bordure noire est parfaitement centrée et le margin:20px est bien exécuté .

Et de la même manière si je mets une bordure de 1px comme avec la class="b3" (border:1px solid green), le margin:20px est bien exécuté .


Quelqu'un pourrait-il m'expliquer la logique?
Merci d'avance pour ceux qui tenteront de m'éclairer.

[NoSmoking]

Bonsoir,
tu es visiblement en face d'un problème de fusion de marge.

Il existe aussi http://plambert.developpez.com/tutor...obleme-marges/

[JefReb]

Merci NoSmocking,
Excellent, c'est exactement cela.
En mettant juste un padding de 1px, le phénomène disparait.
Bon sang! ce que j'ai pu chercher et c'était si simple.
Encore merci