Lorsqu'un élément avec une marge contenue à l'intérieur d'un autre élément, le parent n'est pas toujours envelopper cette marge.
Beaucoup de choses vont amener les parents à envelopper l'enfant de la marge:
- border:solid;
- position:absolute;
- display:inline-block;
- overflow:auto
(Et ce, juste de petits essais, nul doute qu'il y est plus).
Je suppose que cela a à voir avec l'effondrement des marges, mais:
- Le W3C spec page n'a pas de description d'un tel comportement.
- Il n'y a pas de chevauchement des marges de ici.
- Le comportement de tous les navigateurs qui semble être cohérente sur cette question.
- Le comportement est affecté par des déclencheurs qui ne sont pas liées à la marge
Quelle est la logique d'un élément dont la valeur par défaut overflow:auto doit contenir un matériau différent de celui où le dépassement est réglé sur auto.
Pourquoi faut-il tout mais le comportement par défaut d'un régulier div supposer que la marge est contenue par le parent - et pourquoi devrais-la régulière par défaut de ne pas inclure la marge?
EDIT: La réponse finale est que le W3C n'a vraiment préciser ce comportement, mais que
- Les spécifications n'ont pas vraiment de sens.
-
Les spécifications mélange, sans aucun mot d'explication:
- "libre marges (marges qui toucherait le haut ou le bas de leur parent ne sont pas contenues par le parent) et
- "effondré marges (marges adjacentes sont autorisés à se chevauchent).
Démo:
<!doctype html>
<html>
<head>
<title>Margins overextending themselves</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
body{
margin:0;
}
div.b{
background-color:green;
}
div.ib{
display:inline-block;
background-color:red;
}
div.pa{
background-color:yellow;
position:absolute;
bottom:0; right:0;
}
div.oa{
background-color:magenta;
overflow:auto;
}
div.brdr{
background-color:pink;
border:solid;
}
h1{margin:100px; width:250px; border:solid;}
</style>
</head>
<body>
<div class="b">
<h1>Is the margin contained?</h1>
</div>
<div class="ib">
<h1>Is the margin contained?</h1>
</div>
<div class="pa">
<h1>Is the margin contained?</h1>
</div>
<div class="oa">
<h1>Is the margin contained?</h1>
</div>
<div class="brdr">
<h1>Is the margin contained?</h1>
</div>
</body>
</html>`
