From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../mastering_margin_collapsing/index.html | 90 ++++++++++++++++++++++ 1 file changed, 90 insertions(+) create mode 100644 files/ru/web/css/css_box_model/mastering_margin_collapsing/index.html (limited to 'files/ru/web/css/css_box_model/mastering_margin_collapsing') diff --git a/files/ru/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/ru/web/css/css_box_model/mastering_margin_collapsing/index.html new file mode 100644 index 0000000000..ce82582529 --- /dev/null +++ b/files/ru/web/css/css_box_model/mastering_margin_collapsing/index.html @@ -0,0 +1,90 @@ +--- +title: Схлопывание внешних отступов +slug: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +tags: + - CSS + - Руководство + - Справка +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +
{{CSSRef}}
+ +

Отступы margin-top и margin-bottom иногда объединяются в один, с размером равным наибольшему из них (или размеру одного, если они равны).
+ Это поведение известно как схлопывание внешних отступов (margin collapsing).
+ Обратите внимание, что отступы плавающих и абсолютно позиционированных элементов никогда не схлопываются.

+ +

Схлопывание внешних отступов происходит в трёх случаях:

+ +
+
Соседние элементы (siblings)
+
Схлопываются отступы соседних элементов  (за исключением случая, когда к последнему элементу применено свойство {{cssxref("clear")}}).
+
Родительский и первый/последний дочерние элементы
+
Если отстутствуют границы (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")}} отступов одного или нескольких его дочерних элементов/блоков, то внешние отступы схлопываются. Схлопнутые отступы заканчиваются за пределами родительского элемента.
+
Пустые блоки
+
Если отстутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block), {{cssxref("height")}} или {{cssxref("min-height")}} для отделения {{cssxref("margin-top")}} верхнего отступа этого блока от его {{cssxref("margin-bottom")}} нижнего отступа, то верхние и нижние внешние отступы этого блока схлопываются.
+
+ +

На заметку:

+ + + +

Примеры

+ +

HTML

+ +
<p>Нижний отступ этого абзаца схлопнулся …</p>
+<p>… с верхним отступом этого абзаца, объеденив отступы между ними в один, равный <code>1.2rem</code>.</p>
+
+<div>Этот родительский элемент содержит два абзаца!
+  <p>Этот абзац имеет отступ <code>.4rem</code> между ним и текстом выше.</p>
+  <p>Нижний отступ этого абзаца схлопывается с отступом родителя, принимая значение <code>2rem</code>.</p>
+</div>
+
+<p>Этот абзац имеет отступ <code>2rem</code> от элемента выше.</p>
+ +

CSS

+ +
div {
+  margin: 2rem 0;
+  background: lavender;
+}
+
+p {
+  margin: .4rem 0 1.2rem 0;
+  background: yellow;
+}
+ +

Результат

+ +

{{EmbedLiveSample('Примеры', 'auto', 350)}}

+ +

Спецификации

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Initial definition
+ +

Смотрите также

+ + -- cgit v1.2.3-54-g00ecf