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
|
---
title: Згортання відступів
slug: Web/CSS/CSS_Box_Model/Згортання_відступів
tags:
- CSS
- Коробчаста модель CSS
- Посібник
translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
---
<div dir="ltr">{{CSSRef}}</div>
<p dir="ltr">The <a href="/en-US/docs/Web/CSS/margin-top">top</a> and <a href="/en-US/docs/Web/CSS/margin-bottom">bottom</a> margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as <strong>margin collapsing</strong>. Note that the margins of <a href="/en-US/docs/Web/CSS/float">floating</a> and <a href="/en-US/docs/Web/CSS/position">absolutely positioned</a> elements never collapse.</p>
<p dir="ltr">Margin collapsing occurs in three basic cases:</p>
<dl>
<dt dir="ltr">Безпосередні (прилеглі) сусіди</dt>
<dd dir="ltr">The margins of adjacent siblings are collapsed (except when the latter sibling needs to be <a href="/en-US/docs/Web/CSS/clear">cleared</a> past floats).</dd>
<dt dir="ltr">Батько та перший/останній дочірній елемент</dt>
<dd dir="ltr">If there is no border, padding, inline part, {{cssxref("Block_formatting_context")}} created, or <em><a href="/en-US/docs/Web/CSS/clear">clearance</a></em> to separate the {{cssxref("margin-top")}} of a block from the {{cssxref("margin-top")}} of its first child block; or no border, padding, inline content, {{cssxref("height")}}, {{cssxref("min-height")}}, or {{cssxref("max-height")}} to separate the {{cssxref("margin-bottom")}} of a block from the {{cssxref("margin-bottom")}} of its last child, then those margins collapse. The collapsed margin ends up outside the parent.</dd>
</dl>
<dl>
<dt dir="ltr">Порожні блоки</dt>
<dd dir="ltr">If there is no border, padding, inline content, {{cssxref("height")}}, or {{cssxref("min-height")}} to separate a block's {{cssxref("margin-top")}} from its {{cssxref("margin-bottom")}}, then its top and bottom margins collapse.</dd>
</dl>
<p dir="ltr">More complex margin collapsing (of more than two margins) occurs when these cases are combined.</p>
<p dir="ltr">These rules apply even to margins that are zero, so the margin of a first/last child ends up outside its parent (according to the rules above) whether or not the parent's margin is zero.</p>
<p dir="ltr">When negative margins are involved, the size of the collapsed margin is the sum of the largest positive margin and the smallest (most negative) negative margin.</p>
<p dir="ltr">When all margins are negative, the size of the collapsed margin is the smallest (most negative) margin. This applies to both adjacent elements and nested elements.</p>
<h2 id="Приклади">Приклади</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><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>Blah blah blah.</p></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">div {
margin: 2rem 0;
background: lavender;
}
p {
margin: .4rem 0 1.2rem 0;
background: yellow;
}</pre>
<h3 id="Результат">Результат</h3>
<p>{{EmbedLiveSample('Examples','100%',250)}}</p>
<h2 dir="ltr" id="Специфікації">Специфікації</h2>
<table class="standard-table" dir="ltr">
<thead>
<tr>
<th scope="col">Специфікація</th>
<th scope="col">Статус</th>
<th scope="col">Коментар</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 dir="ltr" id="Див._також">Див. також</h2>
<ul>
<li dir="ltr"><a href="/en-US/docs/Web/CSS/CSS_Reference">CSS Reference</a></li>
<li dir="ltr">{{css_key_concepts}}</li>
</ul>
|
