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/Mastering_margin_collapsing
tags:
- CSS
- Руководство
- Справка
translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
---
<div>{{CSSRef}}</div>
<p>Отступы <a href="/en-US/docs/Web/CSS/margin-top">margin-top</a> и <a href="/en-US/docs/Web/CSS/margin-bottom">margin-bottom</a> иногда объединяются в один, с размером равным наибольшему из них (или размеру одного, если они равны).<br>
Это поведение известно как <strong>схлопывание внешних отступов (margin collapsing).</strong><br>
Обратите внимание, что отступы <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/float">плавающих </a>и <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute">абсолютно позиционированных</a> элементов никогда не схлопываются.</p>
<p>Схлопывание внешних отступов происходит в трёх случаях:</p>
<dl>
<dt>Соседние элементы (siblings)</dt>
<dd>Схлопываются отступы соседних элементов (за исключением случая, когда к последнему элементу применено свойство {{cssxref("clear")}}).</dd>
<dt>Родительский и первый/последний дочерние элементы</dt>
<dd>Если отсутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block) или промежуток для отделения {{cssxref("margin-top")}} родительского элемента, от {{cssxref("margin-top")}} одного или нескольких его дочерних элементов/блоков или отсутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block), {{cssxref("height")}}, {{cssxref("min-height")}} или {{cssxref("max-height")}} для отделения отступов {{cssxref("margin-bottom")}} родительского блока от {{cssxref("margin-bottom")}} отступов одного или нескольких его дочерних элементов/блоков, то внешние отступы схлопываются. Схлопнутые отступы заканчиваются за пределами родительского элемента.</dd>
<dt>Пустые блоки</dt>
<dd>Если отсутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block), {{cssxref("height")}} или {{cssxref("min-height")}} для отделения {{cssxref("margin-top")}} верхнего отступа этого блока от его {{cssxref("margin-bottom")}} нижнего отступа, то верхние и нижние внешние отступы этого блока схлопываются.</dd>
</dl>
<p><u>На заметку:</u></p>
<ul>
<li>Более сложное схлопывание отступов (более, чем двух) происходит, когда описанные случаи сочетаются.</li>
<li>Эти правила применяются даже к отступам, равным 0, поэтому отступ первого/последнего дочернего элемента заканчивается за пределами его родителя (согласно правилу выше) независимо от того, равен ли отступ родителя нулю.</li>
<li>При использовании отрицательных отступов, размер схлопнутого отступа вычисляется, как сумма наибольшего положительного и наименьшего отрицательного (наибольшего по модулю) отступа.</li>
<li>Если все отступы отрицательные, размер схлопнутого отступа равен наименьшему (наибольшему по модулю) отступу. Это относится как к вложенным элементам, так и к соседним.</li>
<li>Внешние отступы <a href="/en-US/docs/Web/CSS/float">плавающих</a> и <a href="/en-US/docs/Web/CSS/position">абсолютно позиционируемых</a> элементов никогда не схлопываются.</li>
</ul>
<h2 id="Примеры"><a id="Examples">Примеры</a></h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Нижний отступ этого абзаца схлопнулся …<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>… с верхним отступом этого абзаца, объеденив отступы между ними в один, равный <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>code</span><span class="punctuation token">></span></span>1.2rem<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>code</span><span class="punctuation token">></span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">>Этот родительский элемент содержит два</span></span></code> <code>абзаца</code><code class="language-html">!
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Этот абзац имеет отступ</code><code class="language-html"> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>code</span><span class="punctuation token">></span></span>.4rem<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>code</span><span class="punctuation token">></span></span></code> <code class="language-html">между ним и текстом выше.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">>Н</span></span>ижний отступ этого абзаца схлопывается с отступом родителя, принимая значение <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>code</span><span class="punctuation token">></span></span>2rem<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>code</span><span class="punctuation token">></span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">>Этот абзац имеет отступ</span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>code</span><span class="punctuation token">></span></span>2rem<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>code</span><span class="punctuation token">></span></span> от элемента выше.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span></code></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">div</span> <span class="punctuation token">{</span>
<span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">2</span><span class="token unit">rem</span> <span class="number token">0</span><span class="punctuation token">;</span>
<span class="property token">background</span><span class="punctuation token">:</span> lavender<span class="punctuation token">;</span>
<span class="punctuation token">}</span>
<span class="selector token">p</span> <span class="punctuation token">{</span>
<span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">.4</span><span class="token unit">rem</span> <span class="number token">0</span> <span class="number token">1.2</span><span class="token unit">rem</span> <span class="number token">0</span><span class="punctuation token">;</span>
<span class="property token">background</span><span class="punctuation token">:</span> yellow<span class="punctuation token">;</span>
<span class="punctuation token">}</span></code></pre>
<h3 id="Результат">Результат</h3>
<p>{{EmbedLiveSample('Примеры', 'auto', 350)}}</p>
<h2 id="Спецификации"><a id="Specifications">Спецификации</a></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="Смотрите_также"><a id="See also">Смотрите также</a></h2>
<ul>
<li><a href="/en-US/docs/Web/CSS/CSS_Reference">CSS Reference</a> </li>
</ul>
|
