为什么父元素不包含边距？ [英] Why would margin not be contained by parent element?
问题描述
当有另一个元素包含带有边距的元素时，父元素不会一直包装该边。
许多事情会导致父元素包装子元素：
- border：solid;
- position：absolute;
- display：inline-block;
- overflow：auto
）
我认为这与折叠边距有关，但是：
- W3C规格页没有此类行为的描述。
- 此处没有重叠的边距。
-
- 这些规范没有任何意义。 / li>
- 规格组合，没有任何字眼解释：
- 自由边距（将触及其父项顶部或底部的边距不包含在父项中） li>
- 折叠边距（相邻边距允许重叠）。
- 自由边距（将触及其父项顶部或底部的边距不包含在父项中） li>
- 如果元素的边距以其父上边缘折叠，则框的顶边界边缘被定义为与父的边缘边缘相同。
- 否则，元素的父级不会参与边距折叠，或只涉及父级的下边距。
- border:solid;
- position:absolute;
- display:inline-block;
- overflow:auto
- 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
- 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).
- If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's.
- Otherwise, either the element's parent is not taking part in the margin collapsing, or only the parent's bottom margin is involved. The position of the element's top border edge is the same as it would have been if the element had a non-zero bottom border.
b
$ b
默认为overflow的元素的逻辑是：auto应该包含与overflow设置为auto的材料不同的材质。
为什么除了普通div的默认行为以外的所有事情都假定边缘由父母包含 - 为什么普通默认值不包括边缘？
编辑：最后的答案是，W3C确实指定了这种行为，但
演示：
<！doctype html&
< html>
< head>
< title>过量延伸的保证金< / title>
< meta http-equiv =Content-Typecontent =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>是否包含保证金？< / h1>
< / div>
< div class =ib>
< h1>是否包含保证金？< / h1>
< / div>
< div class =pa>
< h1>是否包含保证金？< / h1>
< / div>
< div class =oa>
< h1>是否包含保证金？< / h1>
< / div>
< div class =brdr>
< h1>是否包含保证金？< / h1>
< / div>
< / body>
< / html>`
是CSS的工作原理根据W3C ：
在本规范中，表达式折叠边距意味着两个边界（没有非空内容，填充或边框区域，或间隔分开）或更多的框（可以相邻或嵌套）组合形成单个边距。
顶部div：
如果框的顶部和底部边距相邻，则边距可以通过它折叠。在这种情况下，元素的位置取决于其与其边缘被折叠的其他元素的关系。
$ b $元素的上边框边缘的位置与元素底边界非零的位置相同。 b
我能做的最好的事情是点击 折叠Marginon sitepoint （由Tommy Olsson和Paul O'Brien提供）。他们以非常的详细说明，通过示例显示您在问题示例代码中演示的行为。
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.
这篇关于为什么父元素不包含边距？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
