initial commit

1 files changed, 90 insertions, 0 deletions

diff --git a/files/uk/web/css/css_box_model/згортання_відступів/index.html b/files/uk/web/css/css_box_model/згортання_відступів/index.html
new file mode 100644
index 0000000000..b47325c5bf
--- /dev/null
+++ b/files/uk/web/css/css_box_model/згортання_відступів/index.html
@@ -0,0 +1,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">&lt;p&gt;The bottom margin of this paragraph is collapsed...&lt;/p&gt;
+&lt;p&gt;...with the top margin of this paragraph, yielding a margin of &lt;code&gt;1.2rem&lt;/code&gt; in between.&lt;/p&gt;
+
+&lt;div&gt;This parent element contains two paragraphs!
+  &lt;p&gt;This paragraph has a &lt;code&gt;.4rem&lt;/code&gt; margin between it and the text above.&lt;/p&gt;
+  &lt;p&gt;My bottom margin collapses with my parent, yielding a bottom margin of &lt;code&gt;2rem&lt;/code&gt;.&lt;/p&gt;
+&lt;/div&gt;
+
+&lt;p&gt;Blah blah blah.&lt;/p&gt;</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>