When an element with a margin is contained within another element, the parent does not consistently wrap that margin.
Many things will cause the parent to wrap the child's margin:
- border:solid;
- position:absolute;
- display:inline-block;
- overflow:auto
(And this just from small testing, no doubt there is more.)
I would assume this has to do with collapsing margins, but:
- The W3C spec page has no description of such behavior.
- There is no overlapping margins here.
- Behavior of all browsers seems to be consistent on this issue.
- The behavior is affected by triggers that are not related to the margins
What is the logic by which an element which defaults to overflow:auto should contain different material than the one where the overflow is set to auto.
Why should everything but the default behavior of a regular div assume that the margin is contained by the parent - and why should the regular default not include the margin?
EDIT: The final answer is that the W3C really does specify this behavior, but that
- The specs do not really make any sense.
- The specs mix, without any word of explanation:
- 'free margins' (margins that would touch the top or bottom of their parent are not contained by the parent) and
- 'collapsed margins' (adjacent margins are allowed to overlap).
Demo:
<!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>`