1 pièce(s) jointe(s)
overflow:hidden et border: 1px solid green
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:
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:
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.
overflow:hidden et border: 1px solid green
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
