From daa1a2aff136fa9da1fcc97d7da97a2036fabc77 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:51:47 +0100 Subject: unslug uk: move --- files/uk/web/css/css_box_model/index.html | 161 +++++++++++++++++++++ .../mastering_margin_collapsing/index.html | 90 ++++++++++++ .../index.html" | 90 ------------ 3 files changed, 251 insertions(+), 90 deletions(-) create mode 100644 files/uk/web/css/css_box_model/index.html create mode 100644 files/uk/web/css/css_box_model/mastering_margin_collapsing/index.html delete mode 100644 "files/uk/web/css/css_box_model/\320\267\320\263\320\276\321\200\321\202\320\260\320\275\320\275\321\217_\320\262\321\226\320\264\321\201\321\202\321\203\320\277\321\226\320\262/index.html" (limited to 'files/uk/web/css/css_box_model') 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..4920b7ceb9 --- /dev/null +++ b/files/uk/web/css/css_box_model/index.html @@ -0,0 +1,161 @@ +--- +title: Коробчаста модель CSS +slug: Web/CSS/Коробчаста_модель_CSS +tags: + - CSS + - Довідка + - Коробчаста модель CSS +translation_of: Web/CSS/CSS_Box_Model +--- +
Коробчаста модель (box model) — це алгоритм CSS, що подає елементи (включно з їх {{cssxref("margin", "відступами")}} та {{cssxref("padding", "полями")}}) у вигляді прямокутних «коробок» та компонує їх відповідно до {{cssxref("Visual_formatting_model", "моделі візуального формування")}}.
+ +

Довідка

+ +

Властивості

+ +

Властивості, що визначають потік (flow) вмісту

+ +
+ +
+ +

Властивості, що визначають розміри

+ +
+ +
+ +

Властивості, що визначають відступи

+ +
+ +
+ +

Властивості, що визначають поля

+ +
+ +
+ +

Інші властивості

+ +
+ +
+ +

Посібники

+ +
+
Вступ до коробчастої моделі CSS
+
Описує та пояснює одне з ґрунтовних понять в CSS — коробчасту модель. Ця модель визначає, як CSS розташовує елементи, їх вміст, {{cssxref("padding", "поля")}}, {{cssxref("border", "обрамок")}} та {{cssxref("margin", "відступи")}}.
+
Згортання відступів
+
Два прилеглі відступи інколи згортаються в один. Ця стаття наводить правила, за якими це відбувається, та пояснює, як цим керувати.
+
Модель візуального формування
+
Описує та пояснює модель візуального формування.
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}} 
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Первинне визначення
+ +

Підтримка веб-переглядачами

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
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 +--- +
{{CSSRef}}
+ +

The top and bottom 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 margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.

+ +

Margin collapsing occurs in three basic cases:

+ +
+
Безпосередні (прилеглі) сусіди
+
The margins of adjacent siblings are collapsed (except when the latter sibling needs to be cleared past floats).
+
Батько та перший/останній дочірній елемент
+
If there is no border, padding, inline part, {{cssxref("Block_formatting_context")}} created, or clearance 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.
+
+ +
+
Порожні блоки
+
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.
+
+ +

More complex margin collapsing (of more than two margins) occurs when these cases are combined.

+ +

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.

+ +

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.

+ +

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.

+ +

Приклади

+ +

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>
+ +

CSS

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

Результат

+ +

{{EmbedLiveSample('Examples','100%',250)}}

+ +

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

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтатусКоментар
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Первинне визначення
+ +

Див. також

+ + diff --git "a/files/uk/web/css/css_box_model/\320\267\320\263\320\276\321\200\321\202\320\260\320\275\320\275\321\217_\320\262\321\226\320\264\321\201\321\202\321\203\320\277\321\226\320\262/index.html" "b/files/uk/web/css/css_box_model/\320\267\320\263\320\276\321\200\321\202\320\260\320\275\320\275\321\217_\320\262\321\226\320\264\321\201\321\202\321\203\320\277\321\226\320\262/index.html" deleted file mode 100644 index b47325c5bf..0000000000 --- "a/files/uk/web/css/css_box_model/\320\267\320\263\320\276\321\200\321\202\320\260\320\275\320\275\321\217_\320\262\321\226\320\264\321\201\321\202\321\203\320\277\321\226\320\262/index.html" +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Згортання відступів -slug: Web/CSS/CSS_Box_Model/Згортання_відступів -tags: - - CSS - - Коробчаста модель CSS - - Посібник -translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing ---- -
{{CSSRef}}
- -

The top and bottom 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 margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.

- -

Margin collapsing occurs in three basic cases:

- -
-
Безпосередні (прилеглі) сусіди
-
The margins of adjacent siblings are collapsed (except when the latter sibling needs to be cleared past floats).
-
Батько та перший/останній дочірній елемент
-
If there is no border, padding, inline part, {{cssxref("Block_formatting_context")}} created, or clearance 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.
-
- -
-
Порожні блоки
-
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.
-
- -

More complex margin collapsing (of more than two margins) occurs when these cases are combined.

- -

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.

- -

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.

- -

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.

- -

Приклади

- -

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>
- -

CSS

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

Результат

- -

{{EmbedLiveSample('Examples','100%',250)}}

- -

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

- - - - - - - - - - - - - - - - -
СпецифікаціяСтатусКоментар
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Первинне визначення
- -

Див. також

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