blob: cdcff96f2ca941234e068ff161590084a46c781c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
---
title: 外边距重叠
slug: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
tags:
- CSS
- CSS 盒模型
- 参考
- 指南
translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
---
<div>{{CSSRef}}</div>
<p>块的<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-top">上外边距(margin-top)</a>和<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin-bottom">下外边距(margin-bottom)</a>有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为<strong>边距折叠</strong>。</p>
<div class="blockIndicator note">
<p>注意有设定<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/float">float</a>和<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/position#absolute">position=absolute</a>的元素不会产生外边距重叠行为。</p>
</div>
<p>有三种情况会形成外边距重叠：</p>
<dl>
<dt>同一层相邻元素之间</dt>
<dd>相邻的两个元素之间的外边距重叠，除非后一个元素加上<a href="/zh-CN/docs/Web/CSS/clear">clear-fix清除浮动</a>。</dd>
</dl>
<pre class="brush: html notranslate"><style>
p:nth-child(1){
margin-bottom: 13px;
}
p:nth-child(2){
margin-top: 87px;
}
</style>
<p>下边界范围会...</p>
<p>...会跟这个元素的上边界范围重叠。</p></pre>
<p>这个例子如果以为边界会合并的话，理所当然会猜测上下2个元素会合并一个100px的边界范围，但其实会发生边界折叠，只会挑选最大边界范围留下，所以这个例子的边界范围其实是87px。</p>
<dl>
<dt>没有内容将父元素和后代元素分开</dt>
<dd> 如果没有边框{{cssxref("border")}}，内边距{{cssxref("padding")}}，行内内容，也没有创建<a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context">块级格式上下文</a>或<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear">清除浮动</a>来分开一个块级元素的上边界{{cssxref("margin-top")}} 与其内一个或多个后代块级元素的上边界{{cssxref("margin-top")}}；或没有边框，内边距，行内内容，高度{{cssxref("height")}}，最小高度{{cssxref("min-height")}}或 最大高度{{cssxref("max-height")}} 来分开一个块级元素的下边界{{cssxref("margin-bottom")}}与其内的一个或多个后代后代块元素的下边界{{cssxref("margin-bottom")}}，则就会出现父块元素和其内后代块元素外边界重叠，重叠部分最终会溢出到父级块元素外面。</dd>
</dl>
<pre class="brush: html notranslate"><style type="text/css">
section {
margin-top: 13px;
margin-bottom: 87px;
}
header {
margin-top: 87px;
}
footer {
margin-bottom: 13px;
}
</style>
<section>
<header>上边界重叠 87</header>
<main></main>
<footer>下边界重叠 87 不能再高了</footer>
</section></pre>
<dl>
<dt>空的块级元素</dt>
<dd>当一个块元素上边界{{cssxref("margin-top")}} 直接贴到元素下边界{{cssxref("margin-bottom")}}时也会发生边界折叠。这种情况会发生在一个块元素完全没有设定边框{{cssxref("border")}}、内边距{{cssxref("padding")}}、高度{{cssxref("height")}}、最小高度{{cssxref("min-height")}} 、最大高度{{cssxref("max-height")}} 、内容设定为inline或是加上<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear">clear-fix</a>的时候。</dd>
</dl>
<pre class="brush: html notranslate"><style>
p {
margin: 0;
}
div {
margin-top: 13px;
margin-bottom: 87px;
}
</style>
<p>上边界范围是 87 ...</p>
<div></div>
<p>... 上边界范围是 87</p></pre>
<p>一些需要注意的地方：</p>
<ul>
<li>上述情况的组合会产生更复杂的外边距折叠。</li>
<li>即使某一外边距为0，这些规则仍然适用。因此就算父元素的外边距是0，第一个或最后一个子元素的外边距仍然会“溢出”到父元素的外面。</li>
<li>如果参与折叠的外边距中包含负值，折叠后的外边距的值为最大的正边距与最小的负边距（即绝对值最大的负边距）的和,；也就是说如果有-13px 8px 100px叠在一起，边界范围的技术就是 100px -13px的87px。</li>
<li>如果所有参与折叠的外边距都为负，折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。</li>
</ul>
<p>以上这些内容都是发生在Block-Level的元素，设定floating和absolutely positioned的元素完全不用担心边界重叠的问题。</p>
<h2 id="示例">示例</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><p>The bottom margin of this paragraph is collapsed …</p>
<p>… with the top margin of this paragraph, yielding a margin of <code>1.2rem</code> in between.</p>
<div>This parent element contains two paragraphs!
<p>This paragraph has a <code>.4rem</code> margin between it and the text above.</p>
<p>My bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p>
</div>
<p>I am <code>2rem</code> below the element above.</p></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css notranslate">div {
margin: 2rem 0;
background: lavender;
}
p {
margin: .4rem 0 1.2rem 0;
background: yellow;
}</pre>
<h3 id="结果">结果</h3>
<p>{{EmbedLiveSample('示例', 'auto', 350)}}</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}</td>
<td>{{Spec2("CSS2.1")}}</td>
<td>初始定义</td>
</tr>
</tbody>
</table>
<h2 id="参见">参见</h2>
<ul>
<li>{{css_key_concepts}}</li>
</ul>
|
