CSS Box Model 関係の文書を更新

- 2021/11/06 時点の英語版に同期

4 files changed, 165 insertions, 225 deletions

diff --git a/files/ja/web/css/css_box_model/index.md b/files/ja/web/css/css_box_model/index.md
index 64fc11ed1d..c877e5a4df 100644
--- a/files/ja/web/css/css_box_model/index.md
+++ b/files/ja/web/css/css_box_model/index.md
@@ -1,114 +1,88 @@
 ---
-title: CSS 基本ボックスモデル
+title: CSS ボックスモデル
 slug: Web/CSS/CSS_Box_Model
 tags:
   - CSS
-  - CSS Box Model
-  - CSS 基本ボックスモデル
-  - Overview
-  - Reference
+  - CSS ボックスモデル
+  - ガイド
+  - 概要
+  - リファレンス
 translation_of: Web/CSS/CSS_Box_Model
 ---
-<div>{{CSSRef}}</div>
-
-<p><strong>CSS 基本ボックスモデル</strong>は CSS のモジュールの1つで、要素に対して作成され、パディングやマージンを含む長方形のボックス定義します。<a href="/ja/docs/Web/CSS/Visual_formatting_model">視覚整形モデル</a>によって配置されます。</p>
-
-<h2 id="Reference" name="Reference">リファレンス</h2>
-
-<h3 id="Properties" name="Properties">プロパティ</h3>
-
-<h4 id="Properties_controlling_the_flow_of_content_in_a_box" name="Properties_controlling_the_flow_of_content_in_a_box">ボックス内のコンテンツの流れを制御するプロパティ</h4>
-
-<div class="index">
-<ul>
- <li>{{CSSxRef("overflow")}}</li>
- <li>{{CSSxRef("overflow-x")}}</li>
- <li>{{CSSxRef("overflow-y")}}</li>
-</ul>
-</div>
-
-<h4 id="Properties_controlling_the_size_of_a_box" name="Properties_controlling_the_size_of_a_box">ボックスの寸法を制御するプロパティ</h4>
-
-<div class="index">
-<ul>
- <li>{{CSSxRef("height")}}</li>
- <li>{{CSSxRef("width")}}</li>
- <li>{{CSSxRef("max-height")}}</li>
- <li>{{CSSxRef("max-width")}}</li>
- <li>{{CSSxRef("min-height")}}</li>
- <li>{{CSSxRef("min-width")}}</li>
-</ul>
-</div>
-
-<h4 id="Properties_controlling_the_margins_of_a_box" name="Properties_controlling_the_margins_of_a_box">ボックスのマージンを制御するプロパティ</h4>
-
-<div class="index">
-<ul>
- <li>{{CSSxRef("margin")}}</li>
- <li>{{CSSxRef("margin-bottom")}}</li>
- <li>{{CSSxRef("margin-left")}}</li>
- <li>{{CSSxRef("margin-right")}}</li>
- <li>{{CSSxRef("margin-top")}}</li>
- <li>{{CSSxRef("margin-trim")}} {{Experimental_Inline}}</li>
-</ul>
-</div>
-
-<h4 id="Properties_controlling_the_paddings_of_a_box" name="Properties_controlling_the_paddings_of_a_box">ボックスのパディングを制御するプロパティ</h4>
-
-<div class="index">
-<ul>
- <li>{{CSSxRef("padding")}}</li>
- <li>{{CSSxRef("padding-bottom")}}</li>
- <li>{{CSSxRef("padding-left")}}</li>
- <li>{{CSSxRef("padding-right")}}</li>
- <li>{{CSSxRef("padding-top")}}</li>
-</ul>
-</div>
-
-<h4 id="Other_properties" name="Other_properties">その他のプロパティ</h4>
-
-<div class="index">
-<ul>
- <li>{{CSSxRef("visibility")}}</li>
-</ul>
-</div>
-
-<h2 id="Guides" name="Guides">ガイド</h2>
-
-<dl>
- <dt><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS ボックスモデルの紹介</a></dt>
- <dd>CSS の基礎的概念の1つである、ボックスモデルを説明します。このモデルは CSS が要素とその内容、パディング、境界線、マージン領域をどのように配置するかを定義します。</dd>
- <dt><a href="/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">マージンの相殺の理解</a></dt>
- <dd>2つの隣接するマージンが1つに相殺されることがあります。この記事ではいつなぜそれが発生し、どのように制御するかを説明します。</dd>
- <dt><a href="/ja/docs/Web/CSS/Visual_formatting_model">視覚整形モデル</a></dt>
- <dd>視覚整形モデルを説明します。</dd>
-</dl>
-
-<h2 id="Browser_Compatibility" name="Browser_Compatibility">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("CSS3 Box")}}</td>
-   <td>{{Spec2("CSS3 Box")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS2.1", "box.html")}}</td>
-   <td>{{Spec2("CSS2.1")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS1")}}</td>
-   <td>{{Spec2("CSS1")}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+{{CSSRef}}
+
+**CSS ボックスモデル**は CSS のモジュールの一つで、要素に対して作成され、パディングやマージンを含む長方形のボックス定義します。[視覚整形モデル](/ja/docs/Web/CSS/Visual_formatting_model)によって配置されます。
+
+## ボックスモデル
+
+CSS のボックスは、テキスト、画像、その他の HTML 要素が表示されるコンテンツ領域で構成されています。この領域は、パディング、境界、マージンによって、1 つ以上の辺で囲まれることがあります。ボックスモデルは、これらの要素がどのように連携して CSS で表示されるボックスを作成するかを説明します。詳しくは、[CSS ボックスモデル入門](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)をご覧ください。
+
+### ボックスの辺のキーワード
+
+ボックスモデルの仕様書では、ボックスの各部分の辺を参照する一連のキーワードが定義されています。これらは、{{cssxref("box-sizing")}} プロパティの値など、CSS のキーワード値としても使用され、ボックスモデルがどのように寸法を計算するかを制御します。
+
+- `content-box`
+  - : そのボックスのコンテンツ領域の辺です。
+- `padding-box`
+  - : そのボックスのパディングの辺です。その方向にパディングがなかった場合は、 `content-box` と同じになります。
+- `border-box`
+  - : そのボックスの境界の辺です。その方向に境界がなかった場合は、 `padding-box` と同じになります。
+- `margin-box`
+  - : そのボックスのマージンの辺です。その方向にマージンがなかった場合は、 `border-box` と同じになります。
+- `stroke-box`
+  - : SVG では、ストロークの囲みボックスを指します。 CSS では `content-box` として扱われます。
+- `view-box`
+  - : SVG では、最も近い SVG ビューポート要素の原点ボックスを指します。これはその要素の {{svgattr("viewBox")}} 属性によって確立された初期の SVG ユーザー座標系の幅と高さを持つ長方形です。CSS では `border-box` として扱われます。
+
+## リファレンス
+
+### プロパティ
+
+> **Note:** 本仕様では、物理的なパディングとマージンのプロパティを定義しています。テキストの方向に関係するフローに関連したプロパティは、[論理的プロパティと値](/ja/docs/Web/CSS/CSS_Logical_Properties)で定義されています。
+
+#### ボックスのマージンを制御するプロパティ
+
+マージンは、ボックスの境界を囲み、ボックス同士の間隔を確保するものです。
+
+- {{CSSxRef("margin")}}
+- {{CSSxRef("margin-bottom")}}
+- {{CSSxRef("margin-left")}}
+- {{CSSxRef("margin-right")}}
+- {{CSSxRef("margin-top")}}
+- {{CSSxRef("margin-trim")}} {{Experimental_Inline}}
+
+#### ボックスのパディングを制御するプロパティ
+
+パディングは、ボックスの境界の縁と内容物の縁の間に挿入されます。
+
+- {{CSSxRef("padding")}}
+- {{CSSxRef("padding-bottom")}}
+- {{CSSxRef("padding-left")}}
+- {{CSSxRef("padding-right")}}
+- {{CSSxRef("padding-top")}}
+
+#### その他のプロパティ
+
+ボックスモデルに関連するプロパティは他にもあり、それらは別の場所で定義されています。
+
+- [境界](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders)
+  - : 境界のプロパティは、境界の太さ、描画スタイル、色を指定します。
+- [オーバーフロー](/ja/docs/Web/CSS/overflow)
+  - : 内容物が多すぎてボックスに入りきらない場合に起こることを制御します。
+
+## ガイド
+
+- [CSS ボックスモデルの紹介](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
+  - : CSS の基礎的概念の 1 つである、ボックスモデルを解説します。このモデルは CSS が要素とそのコンテンツ領域、パディング領域、境界領域、マージン領域をどのように配置するかを定義しています。
+- [マージンの相殺の理解](/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)
+  - : 2 つの隣接するマージンが 1 つに相殺されることがあります。この記事ではいつなぜそれが発生し、どのように制御するかを説明します。
+- [視覚整形モデル](/ja/docs/Web/CSS/Visual_formatting_model)
+  - : 視覚整形モデルを説明します。
+
+## 仕様書
+
+| 仕様書                             | 状態                  | 備考                 |
+| ---------------------------------- | --------------------- | -------------------- |
+| {{SpecName("CSS3 Box")}}           | {{Spec2("CSS3 Box")}} | `margin-trim` を追加 |
+| {{SpecName("CSS2.1", "box.html")}} | {{Spec2("CSS2.1")}}   |                      |
+| {{SpecName("CSS1")}}               | {{Spec2("CSS1")}}     | 初回定義             |
diff --git a/files/ja/web/css/css_box_model/introduction_to_the_css_box_model/boxmodel-(3).png b/files/ja/web/css/css_box_model/introduction_to_the_css_box_model/boxmodel-(3).png
new file mode 100644
index 0000000000..24caeaeed0
--- /dev/null
+++ b/files/ja/web/css/css_box_model/introduction_to_the_css_box_model/boxmodel-(3).png
diff --git a/files/ja/web/css/css_box_model/introduction_to_the_css_box_model/index.md b/files/ja/web/css/css_box_model/introduction_to_the_css_box_model/index.md
index 80bf608f4f..d55475d276 100644
--- a/files/ja/web/css/css_box_model/introduction_to_the_css_box_model/index.md
+++ b/files/ja/web/css/css_box_model/introduction_to_the_css_box_model/index.md
@@ -3,77 +3,59 @@ title: CSS 基本ボックスモデル入門
 slug: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
 tags:
   - CSS
-  - CSS Box Model
-  - CSS 基本ボックスモデル
-  - Guide
-  - Reference
+  - CSS ボックスモデル
+  - ガイド
+  - リファレンス
 translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>ブラウザーのレンダリングエンジンは文書をレイアウトする際に、それぞれの要素を標準的な <strong>CSS ボックスモデル</strong>に基づいた長方形のボックスとして表現します。 CSS はこれらのボックスの寸法、位置、プロパティ（色、背景、境界線の太さなど）を決定します。</p>
+ブラウザーのレンダリングエンジンは文書をレイアウトする際に、それぞれの要素を標準的な **CSS 基本ボックスモデル**に基づいた長方形のボックスとして表現します。 CSS はこれらのボックスの寸法、位置、プロパティ（色、背景、境界の幅など）を決定します。
 
-<p>それぞれのボックスは4つの部品 (または<em>領域</em>) から構成され、それぞれの辺について<em>コンテンツ境界 (content edge)</em>、<em>パディング境界 (padding edge)</em>、<em>ボーダー境界 (border edge)</em>、<em>マージン境界 (margin edge)</em> が定義されています。</p>
+それぞれのボックスは 4 つの部品 (または*領域*) から構成され、それぞれの縁について*コンテンツの縁 (content edge)*、*パディングの縁 (padding edge)*、*境界の縁 (border edge)*、*マージンの縁 (margin edge)* が定義されています。
 
-<p><img alt="CSS ボックスモデル" src="https://mdn.mozillademos.org/files/8685/boxmodel-(3).png" style="height: 384px; width: 548px;"></p>
+![CSS ボックスモデル](<boxmodel-(3).png>)
 
-<p id="content-area"><strong>コンテンツ領域</strong>は、コンテンツ境界に囲まれた領域で、文字列、画像、動画プレイヤー等の「実際の」コンテンツを含みます。領域の寸法は<em>コンテンツ幅</em>（または<em>コンテンツボックスの幅</em>）と<em>コンテンツの高さ</em>（または<em>コンテンツボックスの高さ）</em>です。背景色や背景画像を持っていることがあります。</p>
+## コンテンツ領域
 
-<p>{{cssxref("box-sizing")}} プロパティが <code>content-box</code> (既定値) に設定されており、要素がブロック要素である場合は、コンテンツ領域の寸法は {{cssxref("width")}}、 {{cssxref("min-width")}}、 {{cssxref("max-width")}}、 {{cssxref("height")}}、 {{cssxref("min-height")}}、 {{cssxref("max-height")}} の各プロパティによって正確に定義することができます。</p>
+**コンテンツ領域**は、コンテンツの縁に囲まれた領域で、文字列、画像、動画プレイヤー等の「実際の」コンテンツを含みます。領域の寸法は*コンテンツ幅*（または*コンテンツボックスの幅*）と*コンテンツの高さ*（または*コンテンツボックスの高さ）*です。背景色や背景画像を持っていることがあります。
 
-<p id="padding-area"><strong>パディング領域</strong>は、パディング境界に囲まれた領域で、コンテンツ領域に要素のパディングを含めて拡張したものです。寸法は<em>パディングボックスの幅</em>と<em>パディングボックスの高さ</em>です。</p>
+{{cssxref("box-sizing")}} プロパティが `content-box` (既定値) に設定されており、要素がブロック要素である場合は、コンテンツ領域の寸法は {{cssxref("width")}}、{{cssxref("min-width")}}、{{cssxref("max-width")}}、{{cssxref("height")}}、{{cssxref("min-height")}}、{{cssxref("max-height")}} の各プロパティによって正確に定義することができます。
 
-<p>パディングの幅は、 {{cssxref("padding-top")}}、 {{cssxref("padding-right")}}、 {{cssxref("padding-bottom")}}、 {{cssxref("padding-left")}} の各プロパティおよび一括指定プロパティの {{cssxref("padding")}} で決定されます。</p>
+## パディング領域
 
-<p id="border-area"><strong>ボーダー領域</strong>は、ボーダー境界に囲まれた領域で、パディング領域に要素の境界線を含めて拡張したものです。寸法は<em>ボーダーボックスの幅</em>と<em>ボーダーボックスの高さ</em> になります。</p>
+**パディング領域**は、パディングの縁に囲まれた領域で、コンテンツ領域に要素のパディングを含めた広がりです。この領域の寸法は、*パディングボックスの幅*と*パディングボックスの高さ*です。
 
-<p>境界線の幅は、 {{cssxref("border-width")}} および一括指定プロパティの {{cssxref("border")}} で決定されます。 {{cssxref("box-sizing")}} プロパティが <code>border-box</code> に設定されていた場合、ボーダー領域の寸法は {{cssxref("width")}}、 {{cssxref("min-width")}}、 {{cssxref("max-width")}}、 {{ cssxref("height") }}, {{cssxref("min-height")}}、 {{cssxref("max-height")}} の各プロパティで正確に定義することができます。ボックスに背景（{{cssxref("background-color")}} 又は {{cssxref("background-image")}}）が設定されている場合、背景はボーダー境界の外枠まで拡張されます（つまり、 Z 順で境界線の下にまで拡張されます）。これは既定の振る舞いで、 CSS の {{cssxref("background-clip")}} プロパティで変更することができます。</p>
+パディングの幅は、 {{cssxref("padding-top")}}、{{cssxref("padding-right")}}、{{cssxref("padding-bottom")}}、{{cssxref("padding-left")}} の各プロパティおよび一括指定プロパティの {{cssxref("padding")}} で決定されます。
 
-<p id="margin-area"><strong>マージン領域</strong>は、マージン境界に囲まれた領域で、ボーダー領域に、隣の要素と分離するために使用する空の領域を含めて拡張したものです。この領域の大きさは、<em>マージンボックスの幅</em>と<em>マージンボックスの高さ</em>になります。</p>
+## 境界領域
 
-<p>マージン領域の寸法は、 {{cssxref("margin-top")}}、 {{cssxref("margin-right")}}、 {{cssxref("margin-bottom")}}、 {{cssxref("margin-left")}} の各プロパティおよび一括指定プロパティである {{cssxref("margin")}} で決定されます。<a href="/ja/docs/Web/CSS/margin_collapsing" title="CSS/margin_collapsing">マージンの相殺</a> (margin collapsing)が発生したときは、マージンがボックス間で共有されるため、マージン領域が明確に定義されません。</p>
+**境界領域**は、境界の縁に囲まれた領域で、パディング領域に要素の境界を含めた広がりです。この領域の寸法は、*境界ボックスの幅*と*境界ボックスの高さ* になります。
 
-<p>置換要素ではないインライン要素については、空間の大きさは {{cssxref('line-height')}} プロパティによって決定され、行の高さに寄与します。この場合も境界線とパディングは、コンテンツの周囲に視覚的に現れます。</p>
+境界の幅は、 {{cssxref("border-width")}} および一括指定プロパティの {{cssxref("border")}} で決定されます。 {{cssxref("box-sizing")}} プロパティが `border-box` に設定されていた場合、境界領域の寸法は {{cssxref("width")}}、{{cssxref("min-width")}}、{{cssxref("max-width")}}、{{ cssxref("height") }}、{{cssxref("min-height")}}、{{cssxref("max-height")}} の各プロパティで正確に定義することができます。ボックスに背景（{{cssxref("background-color")}} または {{cssxref("background-image")}}）が設定されている場合、背景は境界の縁の外枠まで拡張されます（つまり、 Z 順で境界の下にまで拡張されます）。これは既定の振る舞いで、 CSS の {{cssxref("background-clip")}} プロパティで変更することができます。
 
-<h2 id="関連情報">関連情報</h2>
+## マージン領域
 
-<ul>
- <li><a href="/ja/docs/Web/CSS/Containing_block">レイアウトと包含ブロック</a></li>
- <li><a href="/ja/docs/Web/CSS/Cascade">CSS カスケードの紹介</a></li>
- <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">カスケードと継承</a></li>
-</ul>
+**マージン領域**は、マージン境界に囲まれた領域で、境界領域に、隣の要素と分離するために使用する空の領域を含めて拡張したものです。この領域の寸法は、*マージンボックスの幅*と*マージンボックスの高さ*になります。
 
-<h2 id="Specification" name="Specification">仕様書</h2>
+マージン領域の寸法は、 {{cssxref("margin-top")}}、{{cssxref("margin-right")}}、{{cssxref("margin-bottom")}}、{{cssxref("margin-left")}} の各プロパティおよび一括指定プロパティである {{cssxref("margin")}} で決定されます。[マージンの相殺](/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)が発生したときは、マージンがボックス間で共有されるため、マージン領域が明確に定義されません。
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('CSS3 Box', '#intro')}}</td>
-   <td>{{Spec2('CSS3 Box')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{ SpecName("CSS2.1","box.html#box-dimensions")}}</td>
-   <td>{{ Spec2('CSS2.1') }}</td>
-   <td>言葉遣いをより正確にしたが、有意な変更点はなし</td>
-  </tr>
-  <tr>
-   <td>{{ SpecName("CSS1","#formatting-model")}}</td>
-   <td>{{ Spec2('CSS1') }}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
+置換要素ではないインライン要素については、空間の大きさは {{cssxref('line-height')}} プロパティによって決定され、行の高さに寄与します。この場合も境界とパディングは、コンテンツの周囲に視覚的に現れます。
 
-<h2 id="See_also_2" name="See_also_2">関連情報</h2>
+## 関連情報
 
-<ul>
- <li>{{css_key_concepts}}</li>
-</ul>
+- [レイアウトと包含ブロック](/ja/docs/Web/CSS/Containing_block)
+- [CSS カスケードの紹介](/ja/docs/Web/CSS/Cascade)
+- [カスケードと継承](/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
+
+## 仕様書
+
+| 仕様書                                            | 状態                  | 備考                                             |
+| ------------------------------------------------- | --------------------- | ------------------------------------------------ |
+| {{SpecName('CSS3 Box', '#intro')}}                | {{Spec2('CSS3 Box')}} |                                                  |
+| {{ SpecName("CSS2.1","box.html#box-dimensions")}} | {{ Spec2('CSS2.1') }} | 言葉遣いをより正確にしたが、有意な変更点はなし。 |
+| {{ SpecName("CSS1","#formatting-model")}}         | {{ Spec2('CSS1') }}   | 初回定義                                         |
+
+## 関連情報
+
+- {{css_key_concepts}}
diff --git a/files/ja/web/css/css_box_model/mastering_margin_collapsing/index.md b/files/ja/web/css/css_box_model/mastering_margin_collapsing/index.md
index 1e62749980..ed20cd38df 100644
--- a/files/ja/web/css/css_box_model/mastering_margin_collapsing/index.md
+++ b/files/ja/web/css/css_box_model/mastering_margin_collapsing/index.md
@@ -1,55 +1,53 @@
 ---
-title: マージンの相殺
+title: マージンの相殺の習得
 slug: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
 tags:
   - CSS
-  - CSS Box Model
   - CSS ボックスモデル
-  - Guide
-  - Reference
+  - ガイド
+  - リファレンス
 translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p>ブロックの<a href="/ja/docs/Web/CSS/margin-top">先頭</a>と<a href="/ja/docs/Web/CSS/margin-bottom">末尾</a>のマージンは、それぞれのマージンの最も大きい寸法 (または等しい場合はいずれか1つ) の単一のマージンに結合される (<ruby>折り畳まれる<rp> (</rp><rt>collapsed</rt><rp>)</rp></ruby>) ことがあり、<strong>マージンの相殺</strong>という動作として知られています。なお、<a href="/ja/docs/Web/CSS/float">浮動</a>要素と<a href="/ja/docs/Web/CSS/position#absolute">絶対位置指定</a>要素では折り畳まれません。</p>
+ブロックの[上端](/ja/docs/Web/CSS/margin-top)と[下端](/ja/docs/Web/CSS/margin-bottom)のマージンは、それぞれのマージンの最も大きい寸法 (または等しい場合はいずれか 1 つ) の単一のマージンに結合される (折り畳まれる、collapsed) ことがあり、**マージンの相殺**という動作として知られています。なお、[浮動](/ja/docs/Web/CSS/float)要素と[絶対位置指定](/ja/docs/Web/CSS/position#types_of_positioning)要素では折り畳まれません。
 
-<p>マージンの相殺は、基本的に3つの場合に発生します。</p>
+マージンの相殺は、基本的に 3 つの場合に発生します。
 
-<dl>
- <dt>隣接兄弟要素</dt>
- <dd>隣接兄弟要素のマージンは相殺されます (後ろの兄弟要素がそれ以前の浮動状態を <a href="/ja/docs/Web/CSS/clear">解除 (clear)</a> する必要がある場合を除く)。</dd>
- <dt>親と子孫を隔てるコンテンツがない場合</dt>
- <dd>あるブロックの {{cssxref("margin-top")}} と、1つ以上の子孫ブロックの {{cssxref("margin-top")}} を隔てる境界、パディング、インライン部分、 <a href="/ja/docs/Web/Guide/CSS/Block_formatting_context">ブロック整形コンテキスト</a>の生成、<em><a href="/ja/docs/Web/CSS/clear">浮動の解除 (clear)</a></em> のいずれもがない場合、もしくは、あるブロックの {{cssxref("margin-bottom")}} と1つ以上の子孫ブロックの {{cssxref("margin-bottom")}} を隔て境界、パディング、インラインコンテンツ、 {{cssxref("height")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}} のいずれもがない場合、それぞれマージンが折り畳まれます。折り畳まれた側のマージンは、親要素の外側に出ます。</dd>
- <dt>空ブロック</dt>
- <dd>あるブロックの {{cssxref("margin-top")}} を {{cssxref("margin-bottom")}} と隔てる境界、パディング、インラインコンテンツ、 {{cssxref("height")}}, {{cssxref("min-height")}} のいずれもがない場合、上端と下端のマージンは相殺されます。</dd>
-</dl>
+- 隣接兄弟要素
+  - : 隣接兄弟要素のマージンは相殺されます (後ろの兄弟要素がそれ以前の浮動状態を[解除](/ja/docs/Web/CSS/clear) する必要がある場合を除く)。
+- 親と子孫を隔てるコンテンツがない場合
+  - : あるブロックの {{cssxref("margin-top")}} と、1 つ以上の子孫ブロックの {{cssxref("margin-top")}} を隔てる境界、パディング、インライン部分、 [ブロック整形コンテキスト](/ja/docs/Web/Guide/CSS/Block_formatting_context)の生成、_[浮動の解除](/ja/docs/Web/CSS/clear)_ のいずれもがない場合、もしくは、あるブロックの {{cssxref("margin-bottom")}} と1つ以上の子孫ブロックの {{cssxref("margin-bottom")}} を隔て境界、パディング、インラインコンテンツ、 {{cssxref("height")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}} のいずれもがない場合、それぞれマージンが折り畳まれます。折り畳まれた側のマージンは、親要素の外側に出ます。
+- 空ブロック
+  - : あるブロックの {{cssxref("margin-top")}} を {{cssxref("margin-bottom")}} と隔てる境界、パディング、インラインコンテンツ、 {{cssxref("height")}}, {{cssxref("min-height")}} のいずれもがない場合、上端と下端のマージンは相殺されます。
 
-<p>注意すべきことがいくつかあります。</p>
+注意すべきことがいくつかあります。
 
-<ul>
- <li>これらのケースが組み合わさると、もっと複雑な (3つ以上の) マージンの相殺が発生します。</li>
- <li>このルールはマージン幅がゼロの場合にも当てはまるので、親要素のマージンがゼロであるかどうかに関わらず、先頭/末尾の子要素のマージンは最終的に、 (上のルールに従って) その親要素より外側に出ます。</li>
- <li>負のマージンが含まれる場合には、相殺されるマージンの大きさは、一番大きな正のマージンと一番小さな (もっともマイナス寄りの) マージンの合計値になります。</li>
- <li>すべてのマージンが負の場合、折りたたまれたマージンのサイズは、最小の (最もマイナス寄りの) マージンとなります。これは、隣接する要素と入れ子になった要素の両方に適用されます。</li>
-</ul>
+- これらのケースが組み合わさると、もっと複雑な (3 つ以上の) マージンの相殺が発生します。
+- このルールはマージン幅がゼロの場合にも当てはまるので、親要素のマージンがゼロであるかどうかに関わらず、先頭/末尾の子要素のマージンは最終的に、 (上のルールに従って) その親要素より外側に出ます。
+- 負のマージンが含まれる場合には、相殺されるマージンの大きさは、一番大きな正のマージンと一番小さな (もっともマイナス寄りの) マージンの合計値になります。
+- すべてのマージンが負の場合、折りたたまれたマージンのサイズは、最小の (最もマイナス寄りの) マージンとなります。これは、隣接する要素と入れ子になった要素の両方に適用されます。
 
-<h2 id="Examples" name="Examples">例</h2>
+<h2 id="Examples">例</h2>
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html notranslate">&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;
+```html
+<p>この段落の下端マージンは相殺されています …</p>
+<p>… この段落の上端マージンとの間で <code>1.2rem</code> のマージンになります。</p>
 
-&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;
+<div>この親要素には 2 つの段落があります。
+  <p>この段落には上のテキストとの間に <code>.4rem</code> のマージンがあります。</p>
+  <p>下端マージンは親と相殺され、下端マージンは <code>2rem</code> になります。</p>
+</div>
 
-&lt;p&gt;I am &lt;code&gt;2rem&lt;/code&gt; below the element above.&lt;/p&gt;</pre>
+<p>上の要素から下に <code>2rem</code> の位置です。</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css notranslate">div {
+```css
+div {
   margin: 2rem 0;
   background: lavender;
 }
@@ -57,33 +55,19 @@ translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
 p {
   margin: .4rem 0 1.2rem 0;
   background: yellow;
-}</pre>
-
-<h3 id="Result" name="Result">例</h3>
-
-<p>{{EmbedLiveSample('Examples', 'auto', 350)}}</p>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <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 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{css_key_concepts}}</li>
-</ul>
+}
+```
+
+### 結果
+
+{{EmbedLiveSample('Examples', 'auto', 350)}}
+
+## 仕様書
+
+| 仕様書                                                                     | 状態                | 備考     |
+| -------------------------------------------------------------------------- | ------------------- | -------- |
+| {{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}} | {{Spec2("CSS2.1")}} | 初回定義 |
+
+## 関連情報
+
+- {{css_key_concepts}}