CSS Box Model のプロパティを更新

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

14 files changed, 721 insertions, 943 deletions

diff --git a/files/ja/web/css/margin-bottom/index.md b/files/ja/web/css/margin-bottom/index.md
index f035539d6b..ec8b38ea0d 100644
--- a/files/ja/web/css/margin-bottom/index.md
+++ b/files/ja/web/css/margin-bottom/index.md
@@ -3,26 +3,26 @@ title: margin-bottom
 slug: Web/CSS/margin-bottom
 tags:
   - CSS
-  - CSS Property
-  - Reference
-  - 'recipe:css-property'
+  - CSS プロパティ
+  - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.margin-bottom
 translation_of: Web/CSS/margin-bottom
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>margin-bottom</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の下側の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">マージン領域</a>を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。</p>
+**`margin-bottom`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の下側の[マージン領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#マージン領域)を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。
 
-<div>{{EmbedInteractiveExample("pages/css/margin-bottom.html")}}</div>
+{{EmbedInteractiveExample("pages/css/margin-bottom.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+![要素ボックスにおける CSS の margin-bottom プロパティの効果](margin-bottom.svg)
 
-<p><img alt="要素ボックスにおける CSS の margin-bottom プロパティの効果" src="/files/4045/margin-bottom.svg" style="border: 1px solid; display: block; height: 130px; margin-left: auto; margin-right: auto; width: 400px;"></p>
+このプロパティは、 {{HTMLElement("span")}} または {{HTMLElement("code")}} のような非[置換](/ja/docs/Web/CSS/Replaced_element)のインライン要素には効果がありません。
 
-<p>このプロパティは、 {{HTMLElement("span")}} または {{HTMLElement("code")}} のような<em>非<a href="/ja/docs/Web/CSS/Replaced_element">置換</a></em>のインライン要素には効果がありません。</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+```css
+/* <length> 値 */
 margin-bottom: 10px;  /* 絶対的な寸法 */
 margin-bottom: 1em;   /* 文字の寸法からの相対 */
 margin-bottom: 5%;    /* 直近のブロックコンテナーの幅からの相対 */
@@ -33,47 +33,49 @@ margin-bottom: auto;
 /* グローバル値 */
 margin-bottom: inherit;
 margin-bottom: initial;
+margin-bottom: revert;
 margin-bottom: unset;
-</pre>
+```
 
-<p><code>margin-bottom</code> プロパティは <code>auto</code> キーワード、または <code>&lt;length&gt;</code> や <code>&lt;percentage&gt;</code> で指定されます。正の数、ゼロ、負の数が指定できます。</p>
+`margin-bottom` プロパティは `auto` キーワード、または `<length>` や `<percentage>` で指定されます。正の数、ゼロ、負の数が指定できます。
 
-<h3 id="Values" name="Values">値</h3>
+### 値
 
-<dl>
- <dt>{{cssxref("&lt;length&gt;")}}</dt>
- <dd>固定値によるマージンの寸法です。</dd>
- <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
- <dd>包含ブロックの <em>width</em> に対するパーセントによるマージンの寸法です。</dd>
- <dt><code>auto</code></dt>
- <dd>ブラウザ―が適切な値を選択して使用します。 {{cssxref("margin")}} を参照してください。</dd>
-</dl>
+- {{cssxref("&lt;length&gt;")}}
+  - : マージンの寸法を固定値で表したものです。
+- {{cssxref("&lt;percentage&gt;")}}
+  - : マージンの寸法を包含ブロックの*幅*に対するパーセント値で表したものです。
+- `auto`
+  - : ブラウザ―が適切な値を選択して使用します。 {{cssxref("margin")}} を参照してください。
 
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+## 公式定義
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="Setting_positive_and_negative_bottom_margins" name="Setting_positive_and_negative_bottom_margins">正および負の数の下側のマージンの設定</h3>
+<h3 id="Setting_positive_and_negative_bottom_margins">正および負の数の下側のマージンの設定</h3>
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html notranslate">&lt;div class="container"&gt;
-&lt;div class="box0"&gt;Box 0&lt;/div&gt;
-&lt;div class="box1"&gt;Box 1&lt;/div&gt;
-&lt;div class="box2"&gt;Box one's negative margin pulls me up&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html
+<div class="container">
+<div class="box0">Box 0</div>
+<div class="box1">Box 1</div>
+<div class="box2">Box one's negative margin pulls me up</div>
+</div>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<p>div に margin-bottom と height を設定する CSS です。</p>
+div に margin-bottom と height を設定する CSS です。
 
-<pre class="brush: css notranslate">.box0 {
+```css
+.box0 {
     margin-bottom:1em;
     height:3em;
 }
@@ -86,12 +88,12 @@ margin-bottom: unset;
     border-width:1px 0;
     margin-bottom:2em;
 }
+```
 
-</pre>
-
-<p>包含要素と div の定義の一部です。これによって margin の効果がより明確に見えます。</p>
+包含要素と div の定義の一部です。これによってマージンの効果がより明確に見えます。
 
-<pre class="brush: css notranslate">.container {
+```css
+.container {
     background-color:orange;
     width:320px;
     border:1px solid black;
@@ -99,48 +101,22 @@ margin-bottom: unset;
 div {
     width:320px;
     background-color:gold;
-}</pre>
-
-<h4 id="Result" name="Result">結果</h4>
-
-<p>{{ EmbedLiveSample('Setting_positive_and_negative_bottom_margins',350,200) }}</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('CSS3 Box', '#propdef-margin-bottom', 'margin-bottom')}}</td>
-   <td>{{Spec2('CSS3 Box')}}</td>
-   <td>目立った変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>CSS1 と同様、ただしインライン要素での効果は削除。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.margin-bottom")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-left")}} と {{cssxref("margin")}} 一括指定</li>
- <li>対応する論理プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}</li>
-</ul>
+}
+```
+
+#### 結果
+
+{{ EmbedLiveSample('Setting_positive_and_negative_bottom_margins',350,200) }}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-left")}} と {{cssxref("margin")}} 一括指定
+- 対応する論理的プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}
diff --git a/files/ja/web/css/margin-bottom/margin-bottom.svg b/files/ja/web/css/margin-bottom/margin-bottom.svg
new file mode 100644
index 0000000000..102a3dc064
--- /dev/null
+++ b/files/ja/web/css/margin-bottom/margin-bottom.svg
@@ -0,0 +1 @@
+<svg baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="400" height="130"><defs><pattern id="a" patternUnits="userSpaceOnUse" x="0" y="0" width="105" height="105"><path d="m0 90 15 15M0 75l30 30M0 60l45 45M0 45l60 60M0 30l75 75M0 15l90 90M0 0l105 105M15 0l90 90M30 0l75 75M45 0l60 60M60 0l45 45M75 0l30 30M90 0l15 15"/></pattern></defs><path fill="azure" d="M130 10h140v90H130z"/><path stroke="#000" stroke-dasharray="3 2" fill="#fff" d="M150 30h100v50H150z"/><path fill="beige" d="M160 40h80v30h-80z"/><text x="290" y="25" font-family="sans-serif" font-size="10pt">マージン領域</text><path stroke="#000" d="M288 20h-53"/><text x="290" y="48" font-family="sans-serif" font-size="10pt">境界</text><path stroke="#000" d="M278 43h-28"/><text x="290" y="71" font-family="sans-serif" font-size="10pt">コンテンツ領域</text><path stroke="#000" d="m288 67-58-7"/><text x="290" y="94" font-family="sans-serif" font-size="10pt">パディング領域</text><path stroke="#000" d="m288 91-53-16"/><path fill="url(#a)" stroke="#000" d="M130 80h140v20H130z"/><path stroke="#000" d="M200 90v25"/><text x="42" y="125" font-family="sans-serif" font-size="10pt">この領域の高さが margin-bottom 値で定義される</text><path stroke="#000" d="M116 100h8m-8-20h8m-4 0v20"/><text x="10" y="93" font-family="'courier new',monospace" font-size="10pt">margin-bottom</text></svg>
\ No newline at end of file
diff --git a/files/ja/web/css/margin-left/index.md b/files/ja/web/css/margin-left/index.md
index 029fd44321..85513a95da 100644
--- a/files/ja/web/css/margin-left/index.md
+++ b/files/ja/web/css/margin-left/index.md
@@ -3,27 +3,27 @@ title: margin-left
 slug: Web/CSS/margin-left
 tags:
   - CSS
-  - CSS Property
+  - CSS プロパティ
   - Layout
-  - Reference
-  - 'recipe:css-property'
+  - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.margin-left
 translation_of: Web/CSS/margin-left
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>margin-left</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の左側の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">マージン領域</a>を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。</p>
+**`margin-left`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の左側の[マージン領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#マージン領域)を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。
 
-<div>{{EmbedInteractiveExample("pages/css/margin-left.html")}}</div>
+{{EmbedInteractiveExample("pages/css/margin-left.html")}}
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+二つの隣り合うボックスの垂直マージンは融合することがあります。これは[_マージンの相殺_](/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)と呼ばれています。
 
-<p>二つの隣り合うボックスの垂直マージンは融合することがあります。これは<a href="/ja/docs/CSS/margin_collapsing"><em>マージンの相殺</em></a>と呼ばれています。</p>
+まれに幅の制約がきつすぎると (つまり、 `width`, `margin-left`, `border`, `padding`, コンテンツ領域, `margin-right` がすべて定義されていた場合)、 `margin-left` は無視され、 `auto` が設定されていたときと同じ計算値になります。
 
-<p>まれに幅の制約がきつすぎると (つまり、 <code>width</code>, <code>margin-left</code>, <code>border</code>, <code>padding</code>, コンテンツ領域, <code>margin-right</code> がすべて定義されていた場合)、 <code>margin-left</code> は無視され、 <code>auto</code> が設定されていたときと同じ計算値になります。</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+```
+/* <length> 値 */
 margin-left: 10px;  /* 絶対的な寸法 */
 margin-left: 1em;   /* 文字の寸法からの相対 */
 margin-left: 5%;    /* 直近のブロックコンテナーの幅からの相対 */
@@ -34,136 +34,132 @@ margin-left: auto;
 /* グローバル値 */
 margin-left: inherit;
 margin-left: initial;
+margin-left: revert;
 margin-left: unset;
-</pre>
-
-<p><code>margin-left</code> プロパティは <code>auto</code> キーワード、または <code>&lt;length&gt;</code> や <code>&lt;percentage&gt;</code> で指定されます。正の数、ゼロ、負の数が指定できます。</p>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt>{{cssxref("&lt;length&gt;")}}</dt>
- <dd>固定値によるマージンの寸法です。</dd>
- <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
- <dd>包含ブロックの <em>width</em> に対するパーセントによるマージンの寸法です。</dd>
- <dt><code>auto</code></dt>
- <dd>左マージンは未使用の水平方向の余白を共有します。これは主に使用されているレイアウトモードによって決定されます。 <code>margin-left</code> と <code>margin-right</code> の両方が <code>auto</code> の場合は、両方に均等に割り当てられます。それ以外の場合は以下の表のとおりです。
- <table class="standard-table">
-  <thead>
-   <tr>
-    <th scope="col">{{cssxref("display")}} の値</th>
-    <th scope="col">{{cssxref("float")}} の値</th>
-    <th scope="col">{{cssxref("position")}} の値</th>
-    <th scope="col"><code>auto</code> の計算値</th>
-    <th scope="col">コメント</th>
-   </tr>
-  </thead>
-  <tbody>
-   <tr>
-    <th><code>inline</code>, <code>inline-block</code>, <code>inline-table</code></th>
-    <th><em>任意</em></th>
-    <th><code>static</code> または <code>relative</code></th>
-    <td><code>0</code></td>
-    <td>インラインレイアウトモード</td>
-   </tr>
-   <tr>
-    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
-    <th><em>任意</em></th>
-    <th><code>static</code> または <code>relative</code></th>
-    <td><code>0</code>。ただし <code>margin-left</code> と <code>margin-right</code> が共に <code>auto</code> に設定されていた場合は、親要素の中で中央揃えする値に設定されます。</td>
-    <td>ブロックレイアウトモード</td>
-   </tr>
-   <tr>
-    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
-    <th><code>left</code> または <code>right</code></th>
-    <th><code>static</code> または <code>relative</code></th>
-    <td><code>0</code></td>
-    <td>ブロックレイアウトモード (フロート要素)</td>
-   </tr>
-   <tr>
-    <th><code>table-*</code> <em>すべて</em>、ただし <code>table-caption</code> <em>を除く</em></th>
-    <th><em>任意</em></th>
-    <th><em>任意</em></th>
-    <td><code>0</code></td>
-    <td>内部の <code>table-*</code> 要素にはマージンがありません。代わりに {{ cssxref("border-spacing") }} を使用してください</td>
-   </tr>
-   <tr>
-    <th><code>flex</code>、 <code>inline-flex</code>, <code>table-*</code> <em>以外のすべて</em></th>
-    <th><em>任意</em></th>
-    <th><em><code>fixed</code></em> または <code>absolute</code></th>
-    <td><code>0</code>。ただし <code>margin-left</code> と <code>margin-right</code> が共に <code>auto</code> に設定されていた場合は、ボーダー領域を <code>width</code> の中で中央揃えする値に設定されます（固定されている場合）。</td>
-    <td>絶対位置指定配置モード</td>
-   </tr>
-   <tr>
-    <th><code>flex</code>, <code>inline-flex</code></th>
-    <th><em>任意</em></th>
-    <th><em>任意</em></th>
-    <td><code>0</code>。ただし、水平に正の余白がある場合は、 <code>auto</code> を指定したすべてのマージンに均等に割り振られます。</td>
-    <td>フレックスボックス配置モード</td>
-   </tr>
-  </tbody>
- </table>
- </dd>
-</dl>
-
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+```
+
+`margin-left` プロパティは `auto` キーワード、または `<length>` や `<percentage>` で指定されます。正の数、ゼロ、負の数が指定できます。
+
+### 値
+
+- {{cssxref("&lt;length&gt;")}}
+  - : マージンの寸法を固定値で表したものです。
+- {{cssxref("&lt;percentage&gt;")}}
+  - : マージンの寸法を包含ブロックの*幅*に対するパーセント値で表したものです。
+- `auto`
+
+  - : 左マージンは未使用の水平方向の余白を共有します。これは主に使用されているレイアウトモードによって決定されます。 `margin-left` と `margin-right` の両方が `auto` の場合は、両方に均等に割り当てられます。それ以外の場合は以下の表のとおりです。
+
+    <table class="standard-table">
+      <thead>
+        <tr>
+          <th scope="col">{{cssxref("display")}} の値</th>
+          <th scope="col">{{cssxref("float")}} の値</th>
+          <th scope="col">{{cssxref("position")}} の値</th>
+          <th scope="col"><code>auto</code> の計算値</th>
+          <th scope="col">コメント</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th>
+            <code>inline</code>, <code>inline-block</code>,
+            <code>inline-table</code>
+          </th>
+          <th><em>任意</em></th>
+          <th><code>static</code> または <code>relative</code></th>
+          <td><code>0</code></td>
+          <td>インラインレイアウトモード</td>
+        </tr>
+        <tr>
+          <th>
+            <code>block</code>, <code>inline</code>, <code>inline-block</code>,
+            <code>block</code>, <code>table</code>, <code>inline-table</code>,
+            <code>list-item</code>, <code>table-caption</code>
+          </th>
+          <th><em>任意</em></th>
+          <th><code>static</code> または <code>relative</code></th>
+          <td>
+            <code>0</code>。ただし <code>margin-left</code> と <code>margin-right</code> が共に <code>auto</code> であった場合を除く。この場合、その要素が親の中で中央揃えされる値が設定される。
+          </td>
+          <td>ブロックレイアウトモード</td>
+        </tr>
+        <tr>
+          <th>
+            <code>block</code>, <code>inline</code>, <code>inline-block</code>,
+            <code>block</code>, <code>table</code>, <code>inline-table</code>,
+            <code>list-item</code>, <code>table-caption</code>
+          </th>
+          <th><code>left</code> または <code>right</code></th>
+          <th><code>static</code> または <code>relative</code></th>
+          <td><code>0</code></td>
+          <td>ブロックレイアウトモード (浮動要素)</td>
+        </tr>
+        <tr>
+          <th>
+            <em>すべての </em><code>table-*</code><em>、ただし </em
+            ><code>table-caption</code> <em>を除く</em>
+          </th>
+          <th><em>任意</em></th>
+          <th><em>任意</em></th>
+          <td><code>0</code></td>
+          <td>
+            内部の <code>table-*</code> 要素にはマージンがない。代わりに {{ cssxref("border-spacing") }} を使用のこと
+          </td>
+        </tr>
+        <tr>
+          <th>
+            <em>任意、ただし</em> <code>flex</code>, <code>inline-flex</code
+            >, <code>table-*</code> <em>を除く</em>
+          </th>
+          <th><em>任意</em></th>
+          <th>
+            <em><code>fixed</code></em> または <code>absolute</code>
+          </th>
+          <td>
+            <code>0</code>。ただし <code>margin-left</code> と <code>margin-right</code> が共に <code>auto</code> 出逢った場合を除く。この場合、利用可能な <code>width</code> の中で境界領域が中央揃えされる値が設定される (fixed の場合)。
+          </td>
+          <td>絶対位置指定レイアウトモード</td>
+        </tr>
+        <tr>
+          <th><code>flex</code>, <code>inline-flex</code></th>
+          <th><em>任意</em></th>
+          <th><em>任意</em></th>
+          <td>
+            <code>0</code>。ただし、水平方向に正の余白がある場合を除く。この場合、 <code>auto</code> を指定したすべてのマージンに均等に分配される。
+          </td>
+          <td>フレックスボックスレイアウトモード</td>
+        </tr>
+      </tbody>
+    </table>
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="Setting_left_margin_using_pixels_and_percentages" name="Setting_left_margin_using_pixels_and_percentages">ピクセル数とパーセント値を使用した左マージンの設定</h3>
+### ピクセル数とパーセント値を使用した左マージンの設定
 
-<pre class="brush: css notranslate">.content { margin-left: 5%; }
+```css
+.content { margin-left: 5%; }
 .sidebox { margin-left: 10px; }
 .logo    { margin-left: -5px; }
-</pre>
-
-<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('CSS3 Box', '#propdef-margin-left', 'margin-left')}}</td>
-   <td>{{Spec2('CSS3 Box')}}</td>
-   <td>CSS 2.1 から目立った変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-left')}}</td>
-   <td>{{Spec2('CSS3 Flexbox')}}</td>
-   <td>フレックス項目での <code>margin-left</code> の挙動を定義。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>CSS1 と同様、ただしインライン要素での効果は削除。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#margin-left', 'margin-left')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.margin-left")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} と {{cssxref("margin")}} 一括指定</li>
- <li>対応付けられる論理的プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}</li>
-</ul>
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} と {{cssxref("margin")}} 一括指定
+- 対応付けられる論理的プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}
diff --git a/files/ja/web/css/margin-right/index.md b/files/ja/web/css/margin-right/index.md
index 4eaaef539f..6158b4d4bf 100644
--- a/files/ja/web/css/margin-right/index.md
+++ b/files/ja/web/css/margin-right/index.md
@@ -3,24 +3,24 @@ title: margin-right
 slug: Web/CSS/margin-right
 tags:
   - CSS
-  - CSS Property
-  - Reference
-  - 'recipe:css-property'
+  - CSS プロパティ
+  - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.margin-right
 translation_of: Web/CSS/margin-right
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>margin-right</code></strong> は <a href="/ja/docs/CSS">CSS</a> のプロパティで、要素の右側の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">マージン領域</a>を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。</p>
+**`margin-right`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の右側の[マージン領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#マージン領域)を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。
 
-<div>{{EmbedInteractiveExample("pages/css/margin-right.html")}}</div>
+{{EmbedInteractiveExample("pages/css/margin-right.html")}}
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+隣り合う二つのボックスの垂直マージンは融合することがあります。これは[_マージンの相殺_](/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)と呼ばれています。
 
-<p>二つの隣り合うボックスの垂直マージンは融合することがあります。これは<a href="/ja/docs/CSS/margin_collapsing"><em>マージンの相殺</em></a>と呼ばれています。</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+```css
+/* <length> 値 */
 margin-right: 20px;  /* 絶対的な寸法 */
 margin-right: 1em;   /* 文字の寸法からの相対 */
 margin-right: 5%;    /* 直近のブロックコンテナーの幅からの相対 */
@@ -31,136 +31,133 @@ margin-right: auto;
 /* グローバル値 */
 margin-right: inherit;
 margin-right: initial;
+margin-right: revert;
 margin-right: unset;
-</pre>
-
-<p><code>margin-right</code> プロパティは <code>auto</code> キーワード、または <code>&lt;length&gt;</code> や <code>&lt;percentage&gt;</code> で指定されます。正の数、ゼロ、負の数が指定できます。</p>
-
-<h3 id="Values" name="Values">値</h3>
-
-<dl>
- <dt>{{cssxref("&lt;length&gt;")}}</dt>
- <dd>固定値によるマージンの寸法です。</dd>
- <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
- <dd>包含ブロックの <em>width</em> に対するパーセントによるマージンの寸法です。</dd>
- <dt><code>auto</code></dt>
- <dd>右マージンは未使用の水平方向の余白を共有します。これは主に使用されているレイアウトモードによって決定されます。 <code>margin-left</code> と <code>margin-right</code> の両方が <code>auto</code> の場合は、両方に均等に割り当てられます。それ以外の場合は以下の表のとおりです。
- <table class="standard-table">
-  <thead>
-   <tr>
-    <th scope="col">{{cssxref("display")}} の値</th>
-    <th scope="col">{{cssxref("float")}} の値</th>
-    <th scope="col">{{cssxref("position")}} の値</th>
-    <th scope="col"><code>auto</code> の計算値</th>
-    <th scope="col">コメント</th>
-   </tr>
-  </thead>
-  <tbody>
-   <tr>
-    <th><code>inline</code>, <code>inline-block</code>, <code>inline-table</code></th>
-    <th><em>任意</em></th>
-    <th><code>static</code> または <code>relative</code></th>
-    <td><code>0</code></td>
-    <td>インラインレイアウトモード</td>
-   </tr>
-   <tr>
-    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
-    <th><em>任意</em></th>
-    <th><code>static</code> または <code>relative</code></th>
-    <td><code>0</code>。ただし <code>margin-left</code> と <code>margin-right</code> が共に <code>auto</code> に設定されていた場合は、親要素の中で中央揃えする値に設定されます。</td>
-    <td>ブロックレイアウトモード</td>
-   </tr>
-   <tr>
-    <th><code>block</code>, <code>inline</code>, <code>inline-block</code>, <code>block</code>, <code>table</code>, <code>inline-table</code>, <code>list-item</code>, <code>table-caption</code></th>
-    <th><code>left</code> または <code>right</code></th>
-    <th><code>static</code> または <code>relative</code></th>
-    <td><code>0</code></td>
-    <td>ブロックレイアウトモード (フロート要素)</td>
-   </tr>
-   <tr>
-    <th><code>table-*</code> <em>すべて</em>、ただし <code>table-caption</code> <em>を除く</em></th>
-    <th><em>任意</em></th>
-    <th><em>任意</em></th>
-    <td><code>0</code></td>
-    <td>内部の <code>table-*</code> 要素にはマージンがありません。代わりに {{ cssxref("border-spacing") }} を使用してください</td>
-   </tr>
-   <tr>
-    <th><code>flex</code>、 <code>inline-flex</code>, <code>table-*</code> <em>以外のすべて</em></th>
-    <th><em>任意</em></th>
-    <th><em><code>fixed</code></em> または <code>absolute</code></th>
-    <td><code>0</code>。ただし <code>margin-left</code> と <code>margin-right</code> が共に <code>auto</code> に設定されていた場合は、ボーダー領域を <code>width</code> の中で中央揃えする値に設定されます（固定されている場合）。</td>
-    <td>絶対位置指定配置モード</td>
-   </tr>
-   <tr>
-    <th><code>flex</code>, <code>inline-flex</code></th>
-    <th><em>任意</em></th>
-    <th><em>任意</em></th>
-    <td><code>0</code>。ただし、水平に正の余白がある場合は、 <code>auto</code> を指定したすべてのマージンに均等に割り振られます。</td>
-    <td>フレックスボックス配置モード</td>
-   </tr>
-  </tbody>
- </table>
+```
+
+`margin-right` プロパティは `auto` キーワード、または `<length>` や `<percentage>` で指定されます。正の数、ゼロ、負の数が指定できます。
+
+### 値
+
+- {{cssxref("&lt;length&gt;")}}
+  - : マージンの寸法を固定値で表したものです。
+- {{cssxref("&lt;percentage&gt;")}}
+  - : マージンの寸法を包含ブロックの*幅*に対するパーセント値で表したものです。
+- `auto`
+
+  - : 右マージンは未使用の水平方向の余白を共有します。これは主に使用されているレイアウトモードによって決定されます。 `margin-left` と `margin-right` の両方が `auto` の場合は、両方に均等に割り当てられます。それ以外の場合は以下の表のとおりです。
+
+    <table class="standard-table">
+      <thead>
+        <tr>
+          <th scope="col">{{cssxref("display")}} の値</th>
+          <th scope="col">{{cssxref("float")}} の値</th>
+          <th scope="col">{{cssxref("position")}} の値</th>
+          <th scope="col"><code>auto</code> の計算値</th>
+          <th scope="col">コメント</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th>
+            <code>inline</code>, <code>inline-block</code>,
+            <code>inline-table</code>
+          </th>
+          <th><em>任意</em></th>
+          <th><code>static</code> または <code>relative</code></th>
+          <td><code>0</code></td>
+          <td>インラインレイアウトモード</td>
+        </tr>
+        <tr>
+          <th>
+            <code>block</code>, <code>inline</code>, <code>inline-block</code>,
+            <code>block</code>, <code>table</code>, <code>inline-table</code>,
+            <code>list-item</code>, <code>table-caption</code>
+          </th>
+          <th><em>任意</em></th>
+          <th><code>static</code> または <code>relative</code></th>
+          <td>
+            <code>0</code>。ただし <code>margin-left</code> と <code>margin-right</code> が共に <code>auto</code> であった場合を除く。この場合、その要素が親の中で中央揃えされる値が設定される。
+          </td>
+          <td>ブロックレイアウトモード</td>
+        </tr>
+        <tr>
+          <th>
+            <code>block</code>, <code>inline</code>, <code>inline-block</code>,
+            <code>block</code>, <code>table</code>, <code>inline-table</code>,
+            <code>list-item</code>, <code>table-caption</code>
+          </th>
+          <th><code>left</code> または <code>right</code></th>
+          <th><code>static</code> または <code>relative</code></th>
+          <td><code>0</code></td>
+          <td>ブロックレイアウトモード (浮動要素)</td>
+        </tr>
+        <tr>
+          <th>
+            <em>すべての </em><code>table-*</code><em>、ただし </em
+            ><code>table-caption</code> <em>を除く</em>
+          </th>
+          <th><em>任意</em></th>
+          <th><em>任意</em></th>
+          <td><code>0</code></td>
+          <td>
+            内部の <code>table-*</code> 要素にはマージンがない。代わりに {{ cssxref("border-spacing") }} を使用のこと
+          </td>
+        </tr>
+        <tr>
+          <th>
+            <em>任意、ただし</em> <code>flex</code>, <code>inline-flex</code
+            >, <code>table-*</code> <em>を除く</em>
+          </th>
+          <th><em>任意</em></th>
+          <th>
+            <em><code>fixed</code></em> または <code>absolute</code>
+          </th>
+          <td>
+            <code>0</code>。ただし <code>margin-left</code> と <code>margin-right</code> が共に <code>auto</code> 出逢った場合を除く。この場合、利用可能な <code>width</code> の中で境界領域が中央揃えされる値が設定される (fixed の場合)。
+          </td>
+          <td>絶対位置指定レイアウトモード</td>
+        </tr>
+        <tr>
+          <th><code>flex</code>, <code>inline-flex</code></th>
+          <th><em>任意</em></th>
+          <th><em>任意</em></th>
+          <td>
+            <code>0</code>。ただし、水平方向に正の余白がある場合を除く。この場合、 <code>auto</code> を指定したすべてのマージンに均等に分配される。
+          </td>
+          <td>フレックスボックスレイアウトモード</td>
+        </tr>
+      </tbody>
+    </table>
  </dd>
-</dl>
 
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+## 公式定義
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="Setting_right_margin_using_pixels_and_percentages" name="Setting_right_margin_using_pixels_and_percentages">ピクセル数とパーセント値を使用した右マージンの設定</h3>
+### ピクセル数とパーセント値を使用した右マージンの設定
 
-<pre class="brush: css notranslate">.content { margin-right: 5%; }
+```css
+.content { margin-right: 5%; }
 .sidebox { margin-right: 10px; }
 .logo    { margin-right: -5px; }
-</pre>
-
-<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('CSS3 Box', '#the-margin', 'margin-right')}}</td>
-   <td>{{Spec2('CSS3 Box')}}</td>
-   <td>目立った変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-right')}}</td>
-   <td>{{Spec2('CSS3 Flexbox')}}</td>
-   <td>フレックス項目での <code>margin-right</code> の挙動を定義。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-right')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>CSS1 と同様、ただしインライン要素での効果は削除。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#margin-right', 'margin-right')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.margin-right")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{cssxref("margin-top")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} と {{cssxref("margin")}} 一括指定</li>
- <li>対応付けられる論理的プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}</li>
-</ul>
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{cssxref("margin-top")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} と {{cssxref("margin")}} 一括指定
+- 対応付けられる論理的プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}
diff --git a/files/ja/web/css/margin-top/index.md b/files/ja/web/css/margin-top/index.md
index fa48d0b5eb..334fd8d539 100644
--- a/files/ja/web/css/margin-top/index.md
+++ b/files/ja/web/css/margin-top/index.md
@@ -3,24 +3,24 @@ title: margin-top
 slug: Web/CSS/margin-top
 tags:
   - CSS
-  - CSS Property
-  - Reference
-  - 'recipe:css-property'
+  - CSS プロパティ
+  - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.margin-top
 translation_of: Web/CSS/margin-top
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>margin-top</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の上側の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">マージン領域</a>を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。</p>
+**`margin-top`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の上側の[マージン領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#マージン領域)を設定します。正の数を指定すると、隣との間が遠くなるように配置され、負の数を指定すると、近くなるように配置します。
 
-<div>{{EmbedInteractiveExample("pages/css/margin-top.html")}}</div>
+{{EmbedInteractiveExample("pages/css/margin-top.html")}}
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+このプロパティは、[置換要素](/ja/docs/Web/CSS/Replaced_element)ではないインライン要素、例えば {{HTMLElement("span")}} や {{HTMLElement("code")}} には効果がありません。
 
-<p>このプロパティは、<em><a href="/ja/docs/Web/CSS/Replaced_element">置換要</a></em>ではないインライン要素、例えば {{HTMLElement("span")}} や {{HTMLElement("code")}} には効果がありません。</p>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; 値 */
+```css
+/* <length> 値 */
 margin-top: 10px;  /* 絶対的な寸法 */
 margin-top: 1em;   /* 文字の寸法からの相対 */
 margin-top: 5%;    /* 直近のブロックコンテナーの幅からの相対 */
@@ -31,76 +31,49 @@ margin-top: auto;
 /* グローバル値 */
 margin-top: inherit;
 margin-top: initial;
+margin-top: revert;
 margin-top: unset;
-</pre>
+```
 
-<p><code>margin-top</code> プロパティは <code>auto</code> キーワード、または <code>&lt;length&gt;</code> や <code>&lt;percentage&gt;</code> で指定されます。正の数、ゼロ、負の数が指定できます。</p>
+`margin-top` プロパティは `auto` キーワード、または `<length>` や `<percentage>` で指定されます。正の数、ゼロ、負の数が指定できます。
 
-<h3 id="Values" name="Values">値</h3>
+### 値
 
-<dl>
- <dt>{{cssxref("&lt;length&gt;")}}</dt>
- <dd>固定値によるマージンの寸法です。</dd>
- <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
- <dd>包含ブロックの <em>width</em> に対するパーセントによるマージンの寸法です。</dd>
- <dt><code>auto</code></dt>
- <dd>ブラウザ―が適切な値を選択して使用します。 {{cssxref("margin")}} を参照してください。</dd>
-</dl>
+- {{cssxref("&lt;length&gt;")}}
+  - : マージンの寸法を固定値で表したものです。
+- {{cssxref("&lt;percentage&gt;")}}
+  - : マージンの寸法を包含ブロックの*幅*に対するパーセント値で表したものです。
+- `auto`
+  - : ブラウザーが適切な値を選択して使用します。 {{cssxref("margin")}} を参照してください。
 
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+## 公式定義
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="Setting_positive_and_negative_top_margins" name="Setting_positive_and_negative_top_margins">正と負の上マージンの設定</h3>
+### 正と負の上マージンの設定
 
-<pre class="brush:css; notranslate">.content { margin-top:   5%; }
+```css
+.content { margin-top:   5%; }
 .sidebox { margin-top: 10px; }
 .logo    { margin-top: -5px; }
 #footer  { margin-top:  1em; }
-</pre>
-
-<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('CSS3 Box', '#the-margin', 'margin-top')}}</td>
-   <td>{{Spec2('CSS3 Box')}}</td>
-   <td>目立った変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-top')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>ただしインライン要素での効果を削除。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS1', '#margin-top', 'margin-top')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.margin-top")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} と {{cssxref("margin")}} 一括指定</li>
- <li>対応付けられる論理的プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}</li>
-</ul>
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}} と {{cssxref("margin")}} 一括指定
+- 対応付けられる論理的プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}
diff --git a/files/ja/web/css/margin-trim/index.md b/files/ja/web/css/margin-trim/index.md
index e0b68f051a..4394279291 100644
--- a/files/ja/web/css/margin-trim/index.md
+++ b/files/ja/web/css/margin-trim/index.md
@@ -3,63 +3,63 @@ title: margin-trim
 slug: Web/CSS/margin-trim
 tags:
   - CSS
-  - CSS Property
+  - CSS プロパティ
   - Draft
   - Experimental
   - NeedsContent
   - NeedsExample
   - NeedsLiveSample
-  - Reference
+  - リファレンス
   - recipe:css-property
 browser-compat: css.properties.margin-trim
 translation_of: Web/CSS/margin-trim
 ---
 {{CSSRef}}
 
-The `margin-trim` property allows the container to trim the margins of its children where they adjoin the container’s edges.
+`margin-trim` プロパティは、包含ブロックがその子のマージンを包含ブロックの縁に隣接する部分で切り取るすることを可能にします。
 
-## Syntax
+## 構文
 
 ```css
 margin-trim: none;
 margin-trim: in-flow;
 margin-trim: all;
 
-/* Global values */
+/* グローバル値 */
 margin-trim: inherit;
 margin-trim: initial;
 margin-trim: revert;
 margin-trim: unset;
 ```
 
-## Values
+## 値
 
 - `none`
-  - : Margins are not trimmed by the container.
+  - : マージンは包含ブロックで切り取られません。
 - `in-flow`
 
-  - : For in-flow boxes contained by this box, block-axis margins adjacent to the box's edges are truncated to zero.
+  - : このボックスに含まれるフロー内のボックスでは、ボックスの縁に隣接するブロック軸のマージンがゼロに切り捨てられます。
 
-    It also truncates any margins collapsed with such a margin.
+    また、そのようなマージンで相殺されたマージンは切り捨てられます。
 
 - `all`
-  - : Trims the margins of in-flow boxes and floats whose margins coincide with the container's content edge.
+  - : 包含ブロックのコンテンツの縁とマージンが一致しているフロー内のボックスや浮動要素のマージンを切り取ります。
 
-## Formal definition
+## 公式定義
 
 {{cssinfo}}
 
-## Formal syntax
+## 形式文法
 
 {{csssyntax}}
 
-## Examples
+## 例
 
-### Basic usage
+### 基本的な使用
 
-Once support is implemented for this property, it will probably work like so:
+このプロパティへの対応が実装されたら、次のように動作するでしょう。
 
-When you've got a container with some inline children and you want to put a margin between each child but not have it interfere with the spacing at the end of the row, you might do something like this:
+インラインの子を持つ包含ブロックがあり、それぞれの子の間にマージンを入れたいが、行末の空間とは干渉しないようにするには、次のようにします。
 
 ```css
 article {
@@ -78,7 +78,7 @@ article > span {
 }
 ```
 
-The problem here is that you'd end up with 20px too much spacing at the right of the row, so you'd maybe do this to fix it:
+ここでの問題は、行の右に 20px の間隔が空きすぎてしまうことで、それを修正するためにこのようにするのではないでしょうか。
 
 ```css
 span:last-child {
@@ -86,7 +86,7 @@ span:last-child {
 }
 ```
 
-It is a pain having to write another rule to achieve this, and it is also not very flexible. Instead, `margin-trim` could fix it:
+これを実現するために別のルールを書かなければならないのは面倒ですし、柔軟性もありません。代わりに、 `margin-trim` で解決できます。
 
 ```css
  article {
@@ -95,14 +95,14 @@ It is a pain having to write another rule to achieve this, and it is also not ve
 }
 ```
 
-## Specifications
+## 仕様書
 
 {{Specifications}}
 
-## Browser compatibility
+## ブラウザーの互換性
 
 {{Compat}}
 
-## See also
+## 関連情報
 
 - {{CSSxRef("margin")}}
diff --git a/files/ja/web/css/margin/index.md b/files/ja/web/css/margin/index.md
index e8e2379d73..620ad1d306 100644
--- a/files/ja/web/css/margin/index.md
+++ b/files/ja/web/css/margin/index.md
@@ -5,27 +5,29 @@ tags:
   - CSS
   - CSS プロパティ
   - CSS 基本ボックスモデル
-  - Reference
+  - recipe:css-shorthand-property
+browser-compat: css.properties.margin
 translation_of: Web/CSS/margin
-translation_of_original: Web/CSS/margin-new
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>margin</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の全四辺の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">マージン領域</a>を設定します。これはすべての個別のマージン ({{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}) の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。</p>
+**`margin`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の全四辺の[マージン領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#マージン領域)を設定します。
 
-<div>{{EmbedInteractiveExample("pages/css/margin.html")}}</div>
+{{EmbedInteractiveExample("pages/css/margin.html")}}
 
-<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>
+## 構成要素のプロパティ
 
-<p>top および bottom のマージンは、 {{HTMLElement("span")}} または {{HTMLElement("code")}} などの<em><a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a>ではない</em>インライン要素には効果がありません。</p>
+このプロパティは以下の CSS プロパティの一括指定です。
 
-<div class="note">
-<p><strong>注:</strong> マージンは要素の周りに追加の領域を作成します。それに対して、 {{cssxref("padding")}} は要素<em>内</em>に追加の領域を作成します。</p>
-</div>
+- {{cssxref("margin-bottom")}}
+- {{cssxref("margin-left")}}
+- {{cssxref("margin-right")}}
+- {{cssxref("margin-top")}}
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="brush:css no-line-numbers notranslate">/* 四辺すべてに適用 */
+```css
+/* 四辺すべてに適用 */
 margin: 1em;
 margin: -3px;
 
@@ -41,62 +43,84 @@ margin: 2px 1em 0 auto;
 /* グローバル値 */
 margin: inherit;
 margin: initial;
+margin: revert;
 margin: unset;
-</pre>
+```
 
-<p><code>margin</code> プロパティは1～4つの値を使って指定することができます。それぞれの値は <code><a href="#&lt;length>">&lt;length&gt;</a></code>、 <code><a href="#&lt;percentage>">&lt;percentage&gt;</a></code>、 または <code><a href="#auto">auto</a></code> キーワードです。負の数を指定すると、要素を既定よりも隣と近づけて描画します。</p>
+`margin` プロパティは 1 ～ 4 つの値を使って指定することができます。それぞれの値は {{cssxref("&lt;length&gt;")}}、{{cssxref("&lt;percentage&gt;")}}、 または `auto` キーワードです。負の数を指定すると、要素を既定よりも隣と近づけて描画します。
 
-<ul>
- <li>値が<strong>1つ</strong>指定された場合、<strong>全四辺</strong>に同じマージンが適用される。</li>
- <li>値が<strong>2つ</strong>指定された場合、1つ目のマージンは<strong>上下</strong>、2つ目は<strong>左右</strong>の辺に適用される。</li>
- <li>値が<strong>3つ</strong>指定された場合、1つ目のマージンは<strong>上</strong>、2つ目は<strong>左右</strong>、3つ目は<strong>下</strong>の辺に適用される。</li>
- <li>値が<strong>4つ</strong>指定された場合、マージンはそれぞれ<strong>上</strong>、<strong>右</strong>、<strong>下</strong>、<strong>左</strong>の順 (時計回り) に適用される。</li>
-</ul>
+- 値が **1 つ**指定された場合、**全四辺**に同じマージンが適用される。
+- 値が **2 つ**指定された場合、1 つ目のマージンは**上下**、2 つ目は**左右**の辺に適用される。
+- 値が **3 つ**指定された場合、1 つ目のマージンは**上**、2 つ目は**左右**、3 つ目は**下**の辺に適用される。
+- 値が **4 つ**指定された場合、マージンはそれぞれ**上**、**右**、**下**、**左**の順 (時計回り) に適用される。
 
-<h3 id="Values" name="Values">値</h3>
+### 値
 
-<dl>
- <dt><strong>{{cssxref("length")}}</strong></dt>
- <dd>固定値によるマージンの寸法です。</dd>
- <dt>{{cssxref("percentage")}}</dt>
- <dd>内包ブロックの <em>width</em> に対するパーセントによるマージンの寸法です。</dd>
- <dt><code>auto</code></dt>
- <dd>ブラウザーが適切なマージンを選択して使用します。例えば、特定の場合に要素を中央揃えするためにこの値を使用します。</dd>
-</dl>
+- {{cssxref("length")}}
+  - : マージンの寸法を固定値で表したものです。
+- {{cssxref("percentage")}}
+  - : マージンの寸法を[包含ブロック](/ja/docs/Web/CSS/Containing_block)の*幅*に対するパーセント値で表したものです。
+- `auto`
+  - : ブラウザーが適切なマージンを選択して使用します。例えば、要素を中央揃えするためにこの値を使用することもあります。
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+## 解説
+
+このプロパティを使用して、要素の全四辺のマージンを設定することができます。マージンは要素の周りに追加の領域を作成します。それに対して、 {{cssxref("padding")}} は要素*内部*に追加の領域を作成します。
+
+top および bottom のマージンは、 {{HTMLElement("span")}} または {{HTMLElement("code")}} などの[置換要素](/ja/docs/Web/CSS/Replaced_element)ではないインライン要素には効果がありません。
+
+### 水平方向の中央揃え
+
+最近のブラウザーで何かを中央揃えしたい場合は、{{cssxref("display")}}`: flex; `{{cssxref("justify-content")}}`: center;` を使用することができます。
+
+しかし、 IE8-9 のような古いブラウザーはフレックスボックスレイアウトに対応していないため、これは利用できません。親要素内で要素を中央揃えするのであれば、 `margin: 0 auto;` を使用してください。
+
+### マージンの相殺
+
+要素の上下のマージンは、相殺されて 2 つのマージンのうち大きい方を取る単一のマージンになることがあります。詳しくは[マージンの相殺の習得](/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)を参照してください。
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="Simple_example" name="Simple_example">単純な例</h3>
+<h3 id="Simple_example">単純な例</h3>
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html notranslate">&lt;div class="center"&gt;This element is centered.&lt;/div&gt;
+```html
+<div class="center">This element is centered.</div>
 
-&lt;div class="outside"&gt;This element is positioned outside of its container.&lt;/div&gt;</pre>
+<div class="outside">This element is positioned outside of its container.</div>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css; highlight:[2,8] notranslate">.center {
-  margin: auto;
-  background: lime;
-  width: 66%;
+```css
+.center {
+  margin: auto;
+  background: lime;
+  width: 66%;
 }
 
 .outside {
-  margin: 3rem 0 0 -3rem;
-  background: cyan;
-  width: 66%;
-}</pre>
+  margin: 3rem 0 0 -3rem;
+  background: cyan;
+  width: 66%;
+}
+```
 
-<p>{{ EmbedLiveSample('Simple_example','100%',120) }}</p>
+{{ EmbedLiveSample('Simple_example','100%',120) }}
 
-<h3 id="More_examples" name="More_examples">その他の例</h3>
+### その他の例
 
-<pre class="brush: css notranslate">margin: 5%;                /* 全辺: 5% のマージン */
+```css
+margin: 5%;                /* 全辺: 5% のマージン */
 
 margin: 10px;              /* 全辺: 10px のマージン */
 
@@ -117,64 +141,19 @@ margin: 2em auto;           /* 上と下: 2em のマージン   */
 
 margin: auto;               /* 上と下: 0 のマージン     */
                             /* ボックスは水平方向に中央 */
-</pre>
-
-<h2 id="Notes" name="Notes">注</h2>
-
-<h3 id="Horizontal_centering" name="Horizontal_centering">水平方向の中央揃え</h3>
-
-<p>最近のブラウザーで何かを中央揃えしたい場合は、 <code><a href="/ja/docs/Web/CSS/display">display</a>: flex; <a href="/ja/docs/Web/CSS/justify-content">justify-content</a>: center;</code> を使用することができます。</p>
-
-<p>しかし、 IE8-9 のような古いブラウザーはフレックスボックスレイアウトに対応していないため、これは利用できません。親要素内で要素を中央揃えするのであれば、 <code>margin: 0 auto;</code> を使用してください。</p>
-
-<h3 id="Margin_collapsing" name="Margin_collapsing">マージンの相殺</h3>
-
-<p>要素の上下のマージンは、相殺されて2つのマージンのうち大きい方を取る単一のマージンになることがあります。詳しくは<a href="/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">マージンの相殺の理解</a>を参照してください。</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('CSS3 Box', '#margin', 'margin') }}</td>
-   <td>{{ Spec2('CSS3 Box') }}</td>
-   <td>有意な変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}</td>
-   <td>{{ Spec2('CSS3 Transitions') }}</td>
-   <td><code>margin</code> をアニメーション可能として定義。</td>
-  </tr>
-  <tr>
-   <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td>
-   <td>{{ Spec2('CSS2.1') }}</td>
-   <td>インライン要素における top および bottom マージンの効果を削除。</td>
-  </tr>
-  <tr>
-   <td>{{ SpecName('CSS1', '#margin', 'margin') }}</td>
-   <td>{{ Spec2('CSS1') }}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{cssinfo}}</p>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.margin")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a class="internal" href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 基本ボックスモデルの紹介 </a></li>
- <li><a class="internal" href="/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">マージンの相殺</a></li>
- <li>{{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}</li>
-</ul>
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS 基本ボックスモデル入門](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
+- [マージンの相殺](/ja/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)
+- {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}
+- 対応する論理的プロパティ: {{cssxref("margin-block-start")}}, {{cssxref("margin-block-end")}}, {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}} および一括指定の {{cssxref("margin-block")}} と {{cssxref("margin-inline")}}
diff --git a/files/ja/web/css/padding-bottom/index.md b/files/ja/web/css/padding-bottom/index.md
index 8aa21ff9bb..5209985100 100644
--- a/files/ja/web/css/padding-bottom/index.md
+++ b/files/ja/web/css/padding-bottom/index.md
@@ -3,108 +3,79 @@ title: padding-bottom
 slug: Web/CSS/padding-bottom
 tags:
   - CSS
-  - CSS Padding
-  - CSS Property
-  - Reference
-  - 'recipe:css-property'
+  - CSS パディング
+  - CSS プロパティ
+  - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.padding-bottom
 translation_of: Web/CSS/padding-bottom
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>padding-bottom</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding-area">パディング領域</a>における下側の高さを設定します。</p>
+**`padding-bottom`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の[パディング領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#パディング領域)における下側の高さを設定します。
 
-<div>{{EmbedInteractiveExample("pages/css/padding-bottom.html")}}</div>
+{{EmbedInteractiveExample("pages/css/padding-bottom.html")}}
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+要素のパディング領域とは、コンテンツと境界との間の領域のことです。
 
-<p>要素のパディング領域とは、コンテンツと境界線の間の領域のことです。</p>
+![CSS の padding-bottom プロパティの要素ボックスへの影響](padding-bottom.svg)
 
-<p><img alt="CSS の padding-bottom プロパティの要素ボックスへの影響" src="/files/4109/padding-bottom.svg" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+> **Note:** {{cssxref("padding")}} プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。
 
-<div class="note">
-<p><strong>注:</strong> {{cssxref("padding")}} プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。</p>
-</div>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; の値 */
+```css
+/* <length> の値 */
 padding-bottom: 0.5em;
 padding-bottom: 0;
 padding-bottom: 2cm;
 
-/* &lt;percentage&gt; の値 */
+/* <percentage> の値 */
 padding-bottom: 10%;
 
 /* グローバル値 */
 padding-bottom: inherit;
 padding-bottom: initial;
+padding-botom: revert;
 padding-bottom: unset;
-</pre>
+```
 
-<p><code>padding-bottom</code> プロパティは、以下のリスト内から選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。</p>
+`padding-bottom` プロパティは、以下のリストから選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。
 
-<h3 id="Values" name="Values">値</h3>
+### 値
 
-<dl>
- <dt>{{cssxref("&lt;length&gt;")}}</dt>
- <dd>固定値によるパディングの寸法です。負の数であってはいけません。</dd>
- <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
- <dd>包含ブロックの width に対するパーセント値によるパディングの寸法です。負の数であってはいけません。</dd>
-</dl>
+- {{cssxref("&lt;length&gt;")}}
+  - : パディングの寸法を固定値で表したものです。負の数であってはいけません。
+- {{cssxref("&lt;percentage&gt;")}}
+  - : パディングの寸法を包含ブロックの*幅*に対するパーセント値で表したものです。負の数であってはいけません。
 
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+## 公式定義
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="Setting_padding_bottom_with_pixels_and_percentages" name="Setting_padding_bottom_with_pixels_and_percentages">ピクセル数とパーセント値で下パディングを設定</h3>
+### ピクセル数とパーセント値で下パディングを設定
 
-<pre class="brush: css notranslate">.content { padding-bottom: 5%; }
+```css
+.content { padding-bottom: 5%; }
 .sidebox { padding-bottom: 10px; }
-</pre>
-
-<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('CSS3 Box', '#propdef-padding-bottom', 'padding-bottom')}}</td>
-   <td>{{Spec2('CSS3 Box')}}</td>
-   <td>変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{Specname('CSS1', '#padding-bottom', 'padding-bottom')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.padding-bottom")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 基本ボックスモデルの紹介</a></li>
- <li>{{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-left")}} および {{cssxref("padding")}} 一括指定</li>
- <li>対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}</li>
-</ul>
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS 基本ボックスモデル入門](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
+- {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-left")}} および {{cssxref("padding")}} 一括指定
+- 対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}
diff --git a/files/ja/web/css/padding-bottom/padding-bottom.svg b/files/ja/web/css/padding-bottom/padding-bottom.svg
new file mode 100644
index 0000000000..4950a32a86
--- /dev/null
+++ b/files/ja/web/css/padding-bottom/padding-bottom.svg
@@ -0,0 +1 @@
+<svg baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="400" height="130"><defs><pattern id="a" patternUnits="userSpaceOnUse" x="0" y="0" width="105" height="105"><path d="m0 90 15 15M0 75l30 30M0 60l45 45M0 45l60 60M0 30l75 75M0 15l90 90M0 0l105 105M15 0l90 90M30 0l75 75M45 0l60 60M60 0l45 45M75 0l30 30M90 0l15 15"/></pattern></defs><path fill="azure" d="M130 10h140v90H130z"/><path stroke="#000" stroke-dasharray="3 2" fill="#fff" d="M150 30h100v50H150z"/><path fill="beige" d="M160 40h80v30h-80z"/><text x="290" y="24" font-family="sans-serif" font-size="10pt">パディング領域</text><path stroke="#000" d="M288 93h-33"/><text x="290" y="48" font-family="sans-serif" font-size="10pt">境界</text><path stroke="#000" d="M288 44h-38"/><text x="290" y="71" font-family="sans-serif" font-size="10pt">コンテンツ領域</text><path stroke="#000" d="m288 67-58-7"/><text x="290" y="97" font-family="sans-serif" font-size="10pt">マージン領域</text><path stroke="#000" d="m288 20-53 15"/><path fill="url(#a)" stroke="#000" d="M150 70h100v10H150z"/><path stroke="#000" d="M200 105V75"/><text x="22" y="120" font-family="sans-serif" font-size="10pt">この領域の高さが padding-bottom 値で定義されます</text><path stroke="#000" d="M136 70h8m-8 10h8m-4-10v10"/><text x="20" y="77" font-family="'courier new',monospace" font-size="10pt">padding-bottom</text></svg>
\ No newline at end of file
diff --git a/files/ja/web/css/padding-left/index.md b/files/ja/web/css/padding-left/index.md
index 589c502943..67c2b40839 100644
--- a/files/ja/web/css/padding-left/index.md
+++ b/files/ja/web/css/padding-left/index.md
@@ -3,106 +3,77 @@ title: padding-left
 slug: Web/CSS/padding-left
 tags:
   - CSS
-  - CSS Padding
-  - CSS Property
-  - Reference
-  - 'recipe:css-property'
+  - CSS パディング
+  - CSS プロパティ
+  - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.padding-left
 translation_of: Web/CSS/padding-left
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>padding-left</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding-area">パディング領域</a>における左側の幅を設定します。</p>
+**`padding-left`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の[パディング領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#パディング領域)における左側の幅を設定します。
 
-<div>{{EmbedInteractiveExample("pages/css/padding-left.html")}}</div>
+{{EmbedInteractiveExample("pages/css/padding-left.html")}}
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+要素のパディング領域とは、コンテンツと境界との間の領域のことです。
 
-<p>要素のパディング領域とは、コンテンツと境界線の間の領域のことです。</p>
+> **Note:** {{cssxref("padding")}} プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。
 
-<div class="note">
-<p><strong>注:</strong> {{cssxref("padding")}} プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。</p>
-</div>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; の値 */
+```css
+/* <length> の値 */
 padding-left: 0.5em;
 padding-left: 0;
 padding-left: 2cm;
 
-/* &lt;percentage&gt; の値 */
+/* <percentage> の値 */
 padding-left: 10%;
 
 /* グローバル値 */
 padding-left: inherit;
 padding-left: initial;
+padding-left: revert;
 padding-left: unset;
-</pre>
+```
 
-<p><code>padding-left</code> プロパティは、以下のリスト内から選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。</p>
+`padding-left` プロパティは、以下のリストから選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。
 
-<h3 id="Values" name="Values">値</h3>
+### 値
 
-<dl>
- <dt>{{cssxref("&lt;length&gt;")}}</dt>
- <dd>固定値によるパディングの寸法です。負の数であってはいけません。</dd>
- <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
- <dd>包含ブロックの width に対するパーセント値によるパディングの寸法です。負の数であってはいけません。</dd>
-</dl>
+- {{cssxref("&lt;length&gt;")}}
+  - : パディングの寸法を固定値で表したものです。負の数であってはいけません。
+- {{cssxref("&lt;percentage&gt;")}}
+  - : パディングの寸法を包含ブロックの*幅*に対するパーセント値で表したものです。負の数であってはいけません。
 
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+## 公式定義
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="Setting_left_padding_using_pixels_and_percentages" name="Setting_left_padding_using_pixels_and_percentages">左パディングをピクセル数とパーセント値で設定</h3>
+### 左パディングをピクセル数とパーセント値で設定
 
-<pre class="brush: css notranslate">.content { padding-left: 5%; }
+```css
+.content { padding-left: 5%; }
 .sidebox { padding-left: 10px; }
-</pre>
-
-<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('CSS3 Box', '#propdef-padding-left', 'padding-left')}}</td>
-   <td>{{Spec2('CSS3 Box')}}</td>
-   <td>変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-left')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{Specname('CSS1', '#padding-left', 'padding-left')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.padding-left")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 基本ボックスモデルの紹介</a></li>
- <li>{{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} および {{cssxref("padding")}} 一括指定</li>
- <li>対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}</li>
-</ul>
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS 基本ボックスモデル入門](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
+- {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} および {{cssxref("padding")}} 一括指定
+- 対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}
diff --git a/files/ja/web/css/padding-right/index.md b/files/ja/web/css/padding-right/index.md
index 85d9486bba..6f6ecea7da 100644
--- a/files/ja/web/css/padding-right/index.md
+++ b/files/ja/web/css/padding-right/index.md
@@ -3,106 +3,77 @@ title: padding-right
 slug: Web/CSS/padding-right
 tags:
   - CSS
-  - CSS Padding
-  - CSS Property
-  - Reference
-  - 'recipe:css-property'
+  - CSS パディング
+  - CSS プロパティ
+  - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.padding-right
 translation_of: Web/CSS/padding-right
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>padding-right</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding-area">パディング領域</a>における右側の幅を設定します。</p>
+**`padding-right`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の[パディング領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#パディング領域)における右側の幅を設定します。
 
-<div>{{EmbedInteractiveExample("pages/css/padding-right.html")}}</div>
+{{EmbedInteractiveExample("pages/css/padding-right.html")}}
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+要素のパディング領域とは、コンテンツと境界との間の空間のことです。
 
-<p>要素のパディング領域とは、コンテンツと境界線の間の領域のことです。</p>
+> **Note:** {{cssxref("padding")}} プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。
 
-<div class="note">
-<p><strong>注:</strong> {{cssxref("padding")}} プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。</p>
-</div>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; の値 */
+```css
+/* <length> の値 */
 padding-right: 0.5em;
 padding-right: 0;
 padding-right: 2cm;
 
-/* &lt;percentage&gt; の値 */
+/* <percentage> の値 */
 padding-right: 10%;
 
 /* グローバル値 */
 padding-right: inherit;
 padding-right: initial;
+padding-right: revert;
 padding-right: unset;
-</pre>
+```
 
-<p><code>padding-right</code> プロパティは、以下のリスト内から選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。</p>
+`padding-right` プロパティは、以下のリストから選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。
 
-<h3 id="Values" name="Values">値</h3>
+### 値
 
-<dl>
- <dt>{{cssxref("&lt;length&gt;")}}</dt>
- <dd>固定値によるパディングの寸法です。負の数であってはいけません。</dd>
- <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
- <dd>包含ブロックの width に対するパーセント値によるパディングの寸法です。負の数であってはいけません。</dd>
-</dl>
+- {{cssxref("&lt;length&gt;")}}
+  - : パディングの寸法を固定値で表したものです。負の数であってはいけません。
+- {{cssxref("&lt;percentage&gt;")}}
+  - : パディングの寸法を包含ブロックの*幅*に対するパーセント値で表したものです。負の数であってはいけません。
 
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+## 公式定義
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="Setting_right_padding_using_pixels_and_percentages" name="Setting_right_padding_using_pixels_and_percentages">右パディングをピクセル数とパーセント値で設定</h3>
+### 右パディングをピクセル数とパーセント値で設定
 
-<pre class="brush: css notranslate">.content { padding-right: 5%; }
+```css
+.content { padding-right: 5%; }
 .sidebox { padding-right: 10px; }
-</pre>
-
-<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('CSS3 Box', '#propdef-padding-right', 'padding-right')}}</td>
-   <td>{{Spec2('CSS3 Box')}}</td>
-   <td>変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-right')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{Specname('CSS1', '#padding-right', 'padding-right')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.padding-right")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 基本ボックスモデルの紹介</a></li>
- <li>{{cssxref("padding-top")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} および {{cssxref("padding")}} 一括指定</li>
- <li>対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}</li>
-</ul>
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS 基本ボックスモデル入門](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
+- {{cssxref("padding-top")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} および {{cssxref("padding")}} 一括指定
+- 対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}
diff --git a/files/ja/web/css/padding-top/index.md b/files/ja/web/css/padding-top/index.md
index 365db61701..a8481332c2 100644
--- a/files/ja/web/css/padding-top/index.md
+++ b/files/ja/web/css/padding-top/index.md
@@ -3,108 +3,79 @@ title: padding-top
 slug: Web/CSS/padding-top
 tags:
   - CSS
-  - CSS Padding
-  - CSS Property
-  - Reference
-  - 'recipe:css-property'
+  - CSS パディング
+  - CSS プロパティ
+  - リファレンス
+  - recipe:css-property
+browser-compat: css.properties.padding-top
 translation_of: Web/CSS/padding-top
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>padding-top</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、要素の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding-area">パディング領域</a>における上側の高さを設定します。</p>
+**`padding-top`** は [CSS](/ja/docs/Web/CSS) のプロパティで、要素の[パディング領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#パディング領域)における上側の高さを設定します。
 
-<div>{{EmbedInteractiveExample("pages/css/padding-top.html")}}</div>
+{{EmbedInteractiveExample("pages/css/padding-top.html")}}
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+要素のパディング領域とは、コンテンツと境界との間の空間のことです。
 
-<p>要素のパディング領域とは、コンテンツと境界線との間の空間のことです。</p>
+![CSS の padding-top プロパティの要素ボックスへの影響](padding-top.svg)
 
-<p><img alt="CSS の padding-top プロパティの要素ボックスへの影響" src="/files/4105/padding-top.svg" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+> **Note:** {{cssxref("padding")}} プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。
 
-<div class="note">
-<p><strong>注:</strong> {{cssxref("padding")}} プロパティは、単一の宣言で要素の四方のパディングをすべて設定することができます。</p>
-</div>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css no-line-numbers notranslate">/* &lt;length&gt; の値 */
+```css
+/* <length> 値 */
 padding-top: 0.5em;
 padding-top: 0;
 padding-top: 2cm;
 
-/* &lt;percentage&gt; の値 */
+/* <percentage> 値 */
 padding-top: 10%;
 
 /* グローバル値 */
 padding-top: inherit;
 padding-top: initial;
+padding-top: revert;
 padding-top: unset;
-</pre>
+```
 
-<p><code>padding-top</code> プロパティは、以下のリスト内から選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。</p>
+`padding-top` プロパティは、以下のリストから選択した値で指定されます。マージンとは異なり、パディングには負の数は使用できません。
 
-<h3 id="Values" name="Values">値</h3>
+### 値
 
-<dl>
- <dt>{{cssxref("&lt;length&gt;")}}</dt>
- <dd>固定値によるパディングの寸法です。負の数であってはいけません。</dd>
- <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
- <dd>包含ブロックの <em>width</em> に対するパーセント値によるパディングの寸法です。負の数であってはいけません。</dd>
-</dl>
+- {{cssxref("&lt;length&gt;")}}
+  - : パディングの寸法を固定値で表したものです。負の数であってはいけません。
+- {{cssxref("&lt;percentage&gt;")}}
+  - : パディングの寸法を包含ブロックの*幅*に対するパーセント値で表したものです。負の数であってはいけません。
 
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+## 公式定義
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="Setting_top_padding_using_pixels_and_percentages" name="Setting_top_padding_using_pixels_and_percentages">上パディングをピクセル数とパーセント値で設定</h3>
+### 上パディングをピクセル数とパーセント値で設定
 
-<pre class="brush: css notranslate">.content { padding-top: 5%; }
+```css
+.content { padding-top: 5%; }
 .sidebox { padding-top: 10px; }
-</pre>
-
-<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('CSS3 Box', '#propdef-padding-top', 'padding-top')}}</td>
-   <td>{{Spec2('CSS3 Box')}}</td>
-   <td>変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{Specname('CSS1', '#padding-top', 'padding-top')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.padding-top")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 基本ボックスモデルの紹介</a></li>
- <li>{{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} および {{cssxref("padding")}} 一括指定</li>
- <li>対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}</li>
-</ul>
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS 基本ボックスモデル入門](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
+- {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}} および {{cssxref("padding")}} 一括指定
+- 対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}
diff --git a/files/ja/web/css/padding-top/padding-top.svg b/files/ja/web/css/padding-top/padding-top.svg
new file mode 100644
index 0000000000..2ed00d344e
--- /dev/null
+++ b/files/ja/web/css/padding-top/padding-top.svg
@@ -0,0 +1 @@
+<svg baseProfile="full" xmlns="http://www.w3.org/2000/svg" width="400" height="130"><defs><pattern id="a" patternUnits="userSpaceOnUse" x="0" y="0" width="105" height="105"><path d="m0 90 15 15M0 75l30 30M0 60l45 45M0 45l60 60M0 30l75 75M0 15l90 90M0 0l105 105M15 0l90 90M30 0l75 75M45 0l60 60M60 0l45 45M75 0l30 30M90 0l15 15"/></pattern></defs><path fill="azure" d="M130 40h140v90H130z"/><path stroke="#000" stroke-dasharray="3 2" fill="#fff" d="M150 60h100v50H150z"/><path fill="beige" d="M160 70h80v30h-80z"/><text x="290" y="124" font-family="sans-serif" font-size="10pt">パディング領域</text><path stroke="#000" d="m288 120-53-15"/><text x="290" y="78" font-family="sans-serif" font-size="10pt">境界</text><path stroke="#000" d="M278 74h-28"/><text x="290" y="101" font-family="sans-serif" font-size="10pt">コンテンツ領域</text><path stroke="#000" d="m288 97-58-7"/><text x="290" y="55" font-family="sans-serif" font-size="10pt">マージン領域</text><path stroke="#000" d="M288 50h-53"/><path fill="url(#a)" stroke="#000" d="M150 60h100v10H150z"/><path stroke="#000" d="M200 27v40"/><text x="42" y="20" font-family="sans-serif" font-size="10pt">この領域の高さが padding-top 値で定義されます</text><path stroke="#000" d="M136 60h8m-8 10h8m-4-10v10"/><text x="35" y="67" font-family="'courier new',monospace" font-size="10pt">padding-top</text></svg>
\ No newline at end of file
diff --git a/files/ja/web/css/padding/index.md b/files/ja/web/css/padding/index.md
index 4f75859c83..ee73492834 100644
--- a/files/ja/web/css/padding/index.md
+++ b/files/ja/web/css/padding/index.md
@@ -3,40 +3,36 @@ title: padding
 slug: Web/CSS/padding
 tags:
   - CSS
-  - CSS Padding
-  - CSS Property
-  - Reference
-  - 'recipe:css-shorthand-property'
+  - CSS パディング
+  - CSS プロパティ
+  - リファレンス
+  - recipe:css-shorthand-property
+browser-compat: css.properties.padding
 translation_of: Web/CSS/padding
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
 
-<p><strong><code>padding</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定プロパティ</a>で、要素の全四辺の<a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#padding-area">パディング領域</a>を一度に設定します。</p>
+**`padding`** は [CSS](/ja/docs/Web/CSS) の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、要素の全四辺の[パディング領域](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#パディング領域)を一度に設定します。
 
-<div>{{EmbedInteractiveExample("pages/css/padding.html")}}</div>
+{{EmbedInteractiveExample("pages/css/padding.html")}}
 
-<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
+要素のパディング領域とは、コンテンツと境界との間の領域のことです。
 
-<p>要素のパディング領域とは、コンテンツと境界線の間の領域のことです。</p>
+> **Note:** パディングは要素の内部に追加の領域を作成します。それに対して、 {{cssxref("margin")}} は要素の*周り*に追加の領域を作成します。
 
-<div class="note">
-<p><strong>注:</strong> パディングは要素の内部に追加の領域を作成します。それに対して、 {{cssxref("margin")}} は要素の<em>周り</em>に追加の領域を作成します。</p>
-</div>
+## 構成要素のプロパティ
 
-<h2 id="Constituent_properties" name="Constituent_properties">構成要素のプロパティ</h2>
+このプロパティは以下の CSS プロパティの一括指定です。
 
-<p>このプロパティは以下の CSS プロパティの一括指定です。</p>
+- {{cssxref("padding-bottom")}}
+- {{cssxref("padding-left")}}
+- {{cssxref("padding-right")}}}
+- {{cssxref("padding-top")}}
 
-<ul>
- <li>{{cssxref("padding-bottom")}}</li>
- <li>{{cssxref("padding-left")}}</li>
- <li>{{cssxref("padding-right")}}}</li>
- <li>{{cssxref("padding-top")}}</li>
-</ul>
+## 構文
 
-<h2 id="Syntax" name="Syntax">構文</h2>
-
-<pre class="brush:css no-line-numbers notranslate">/* 四辺すべてに適用 */
+```css
+/* 四辺すべてに適用 */
 padding: 1em;
 
 /* 上下 | 左右 */
@@ -51,48 +47,47 @@ padding: 5px 1em 0 1em;
 /* グローバル値 */
 padding: inherit;
 padding: initial;
+padding: revert;
 padding: unset;
-</pre>
+```
 
-<p><code>padding</code> プロパティは1つ、2つ、3つ、4つの値を使って指定することができます。それぞれの値は {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} です。負の数は無効です。</p>
+`padding` プロパティは 1 つ、2 つ、3 つ、4 つの値を使って指定することができます。それぞれの値は {{cssxref("&lt;length&gt;")}} または {{cssxref("&lt;percentage&gt;")}} です。負の数は無効です。
 
-<ul>
- <li>値が<strong>1つ</strong>指定された場合、<strong>全四辺</strong>に同じパディングが適用される。</li>
- <li>値が<strong>2つ</strong>指定された場合、1つ目のパディングは<strong>上下</strong>、2つ目は<strong>左右</strong>の辺に適用される。</li>
- <li>値が<strong>3つ</strong>指定された場合、1つ目のパディングは<strong>上</strong>、2つ目は<strong>左右</strong>、3つ目は<strong>下</strong>の辺に適用される。</li>
- <li>値が<strong>4つ</strong>指定された場合、パディングはそれぞれ<strong>上</strong>、<strong>右</strong>、<strong>下</strong>、<strong>左</strong>の順 (時計回り) に適用される。</li>
-</ul>
+- 値が **1 つ**指定された場合、**全四辺**に同じパディングが適用される。
+- 値が **2 つ**指定された場合、1 つ目のパディングは**上下**、2 つ目は**左右**の辺に適用される。
+- 値が **3 つ**指定された場合、1 つ目のパディングは**上**、2 つ目は**左右**、3 つ目は**下**の辺に適用される。
+- 値が **4 つ**指定された場合、パディングはそれぞれ**上**、**右**、**下**、**左**の順 (時計回り) に適用される。
 
-<h3 id="Values" name="Values">値</h3>
+### 値
 
-<dl>
- <dt>{{cssxref("&lt;length&gt;")}}</dt>
- <dd>固定値によるパディングの寸法です。</dd>
- <dt>{{cssxref("&lt;percentage&gt;")}}</dt>
- <dd>コンテナーブロックの<em>幅</em>に対するパーセント値によるパディングの寸法です。</dd>
-</dl>
+- {{cssxref("&lt;length&gt;")}}
+  - : パディングの寸法を固定値で表したものです。
+- {{cssxref("&lt;percentage&gt;")}}
+  - : パディングの寸法を包含ブロックの*幅*に対するパーセント値で表したものです。
 
-<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>
+## 公式定義
 
-<p>{{cssinfo}}</p>
+{{cssinfo}}
 
-<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>
+## 形式文法
 
 {{csssyntax}}
 
-<h2 id="Examples" name="Examples">例</h2>
+## 例
 
-<h3 id="Setting_padding_with_pixels" name="Setting_padding_with_pixels">パディングをピクセル数で設定</h3>
+<h3 id="Setting_padding_with_pixels">パディングをピクセル数で設定</h3>
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html notranslate">&lt;h4&gt;This element has moderate padding.&lt;/h4&gt;
-&lt;h3&gt;The padding is huge in this element!&lt;/h3&gt;
-</pre>
+```html
+<h4>This element has moderate padding.</h4>
+<h3>The padding is huge in this element!</h3>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css notranslate">h4 {
+```css
+h4 {
   background-color: lime;
   padding: 20px 50px;
 }
@@ -101,15 +96,16 @@ h3 {
   background-color: cyan;
   padding: 110px 50px 50px 110px;
 }
-</pre>
+```
 
-<h4 id="Result" name="Result">結果</h4>
+#### 結果
 
-<p><span>{{EmbedLiveSample('Setting_padding_with_pixels', '100%', 300)}}</span></p>
+{{EmbedLiveSample('Setting_padding_with_pixels', '100%', 300)}}
 
-<h3 id="Setting_padding_with_pixels_and_percentages" name="Setting_padding_with_pixels_and_percentages">パディングをピクセル数とパーセント値で設定</h3>
+### パディングをピクセル数とパーセント値で設定
 
-<pre class="brush: css notranslate">padding: 5%;                /* 全辺: 5% のパディング */
+```css
+padding: 5%;                /* 全辺: 5% のパディング */
 
 padding: 10px;              /* 全辺: 10px のパディング */
 
@@ -123,45 +119,19 @@ padding: 10px 3% 20px;      /* 上:     10px のパディング */
 padding: 1em 3px 30px 5px;  /* 上:     1em のパディング  */
                             /* 右:     3px のパディング  */
                             /* 下:     30px のパディング */
-                            /* 右:     5px のパディング  */ </pre>
-
-<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('CSS3 Box', '#padding-shorthand', 'padding')}}</td>
-   <td>{{Spec2('CSS3 Box')}}</td>
-   <td>変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('CSS2.1', 'box.html#propdef-padding', 'padding')}}</td>
-   <td>{{Spec2('CSS2.1')}}</td>
-   <td>変更なし。</td>
-  </tr>
-  <tr>
-   <td>{{Specname('CSS1', '#padding', 'padding')}}</td>
-   <td>{{Spec2('CSS1')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<p>{{Compat("css.properties.padding")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 基本ボックスモデルの紹介</a></li>
- <li>{{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}</li>
- <li>対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}</li>
-</ul>
+                            /* 右:     5px のパディング  */
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [CSS 基本ボックスモデル入門](/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
+- {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}
+- 対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}