Why would margin not be contained by parent element?
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:
(And this just from small testing, no doubt there is more.)
I would assume this has to do with collapsing margins, but:
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
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>`
This is how CSS works according to W3C:
In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding, or border areas, or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.
More specific to your case of the top div:
If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through it. In this case, the position of the element depends on its relationship with the other elements whose margins are being collapsed.
The best thing I can do is point you to on "Collapsing Margins" on sitepoint (by Tommy Olsson and Paul O'Brien). They do a very detailed explanation with examples showing you exactly the behaviors you demoed in the question example code.
链接地址: http://www.djcxy.com/p/87772.html上一篇: HTML 5奇怪的IMG总是在底部添加3px的边距
下一篇: 为什么保证金不会被父元素包含?