blob: be8ea00259b39d1b262ee028d57a70650bb113f3 (
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
|
---
title: 理解邊界重疊的原因
slug: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
---
<div>{{CSSRef}}</div>
<div>當一個 Block 的 <a href="/en-US/docs/Web/CSS/margin-bottom">下邊界範圍</a> ( margin-bottom ) 和一個 Block 的 <a href="/en-US/docs/Web/CSS/margin-top">上邊界範圍</a> ( margin-top ) 都有設定時只會留下最大那個，這種情況我們稱為<strong>邊界重疊</strong> ( margin collapsing )。請留意設定了 float 或<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute">絕對定位</a>的元件並不會產生邊界重疊。</div>
<p>有三個標準情況會形成邊界重疊：</p>
<dl>
<dt>同一層的相鄰</dt>
<dd>兩個相鄰的元素邊界就會發生重疊，除非後者有加上clear-fix。例如：
<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>
</dd>
<dd>如果邊界會合併的的話，理所當然會認為上例中的上下兩個元素會合成一個 100px 的邊界範圍。<br>
但其實會發生重疊，而且只會留下最大的邊界範圍，以此例子來說，邊界範圍就是 87px。</dd>
<dt></dt>
<dt>父元素與第一個/最後一個子元素</dt>
<dd>如果第一個子元素跟父元素的上邊界範圍 ( margin-top ) 貼在一起，也會發生邊界重疊的情況。除非父元素有設定邊框 ( border ) 、 內距 ( padding )、內容設定為 inline 或是有加上 clear-fix，這些都會隔開子元素和父元素的屬性。<br>
最後一個子元素也是，但是與父元素的下邊界範圍 ( margin-bottom ) 更容易被隔開，因為父元素可以設定這些屬性。例如：</dd>
<dd>
<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>
<footer>下邊界重疊還是 87 不能再高了</footer>
</section></pre>
</dd>
<dt>空的元素</dt>
<dd>當同一個元素上邊界範圍可以直接貼到下邊界範圍時，也會發生邊界重疊。這種情況會發生在一個元素完全沒有設定邊框 ( border ) 、 內距 ( padding )、高度 ( height ) 、最小高度 ( min-height ) 、最大高度 ( max-height ) 、內容設定為 inline 或是加上 clear-fix 的時候。例如：</dd>
<dd>
<pre class="brush: html notranslate"><style>
p {
margin: 0px;
}
div {
margin-top: 13px;
margin-bottom: 87px;
}
</style>
<p>下邊界範圍是 87</p>
<div></div>
<p>...上邊界範圍也是 87。</p>
</pre>
</dd>
</dl>
<p>上面這些情況是會同時發生的，那時邊界重疊的原因又更複雜了。</p>
<p>比較特別的是，當計算的時候某些邊界範圍是負數，邊界重疊的結果會取最大值和最小值相加。舉例來說如果 -13px、8px 和 100px 疊在一起，邊界範圍的計算方法會是 100px - 13px 也就是 87px。</p>
<p>以上這些內容都是發生在 Block-Level 的元素，設定 floating 和 absolutely positioned 的元素完全不用擔心邊界重疊的計算。</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>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="參考">參考</h2>
<ul>
<li><a href="/en-US/docs/Web/CSS/CSS_Reference">CSS Reference</a></li>
<li>{{css_key_concepts}}</li>
</ul>
|
