diff options
Diffstat (limited to 'files/uk/web/css/css_box_model/mastering_margin_collapsing')
| -rw-r--r-- | files/uk/web/css/css_box_model/mastering_margin_collapsing/index.html | 90 |
1 files changed, 90 insertions, 0 deletions
diff --git a/files/uk/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/uk/web/css/css_box_model/mastering_margin_collapsing/index.html new file mode 100644 index 0000000000..b47325c5bf --- /dev/null +++ b/files/uk/web/css/css_box_model/mastering_margin_collapsing/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"><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> |