From 4fdf7b2b5b8209d89af7254987e85c664c813b28 Mon Sep 17 00:00:00 2001
From: "Eric A. Meyer" <eric@meyerweb.com>
Date: Fri, 5 Mar 2021 11:47:45 -0500
Subject: [PATCH] Changes to margin-block and margin-inline (#2859)

* Fixed cssxref errors in learn/css/css_layout/grids to prevent double-double parentheses from appearing

* Upgraded LiveSample for margin-inline

* Upgraded LiveSample for margin-inline

* Upgraded LiveSample for margin-block

* Tweaked LiveSample for margin-inline

* Tweaked LiveSample for margin-block

* Minor edit to  margin-block

* Minor edits to margin-block and margin-inline
---
 files/en-us/web/css/margin-block/index.html  | 34 ++++++++++++--------
 files/en-us/web/css/margin-inline/index.html | 34 ++++++++++++--------
 2 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/files/en-us/web/css/margin-block/index.html b/files/en-us/web/css/margin-block/index.html
index 4e76630578160df..288f6d1563358ed 100644
--- a/files/en-us/web/css/margin-block/index.html
+++ b/files/en-us/web/css/margin-block/index.html
@@ -29,7 +29,7 @@
 margin-block: unset;
 </pre>
 
-<p>These values corresponds to the {{CSSxRef("margin-top")}} and {{CSSxRef("margin-bottom")}}, or {{CSSxRef("margin-right")}}, and {{CSSxRef("margin-left")}} property depending on the values defined for {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, and {{CSSxRef("text-orientation")}}.</p>
+<p>This property corresponds to the {{CSSxRef("margin-top")}} and {{CSSxRef("margin-bottom")}}, or the {{CSSxRef("margin-right")}} and {{CSSxRef("margin-left")}} properties, depending on the values defined for {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, and {{CSSxRef("text-orientation")}}.</p>
 
 <h2 id="Constituent_properties">Constituent properties</h2>
 
@@ -58,30 +58,38 @@ <h2 id="Examples">Examples</h2>
 
 <h3 id="Setting_block_start_and_end_margins">Setting block start and end margins</h3>
 
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
 <h4 id="CSS">CSS</h4>
 
 <pre class="brush: css">div {
   background-color: yellow;
   width: 120px;
-  height: 120px;
+  height: auto;
+  border: 1px solid green;
 }
 
-.exampleText {
-  writing-mode: vertical-rl;
+p {
+  margin: 0;
   margin-block: 20px 40px;
-  background-color: #c8c800;
+  background-color: tan;
+}
+
+.verticalExample {
+  writing-mode: vertical-rl;
 }</pre>
 
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+&lt;div class="verticalExample"&gt;
+  &lt;p&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
 <h4 id="Result">Result</h4>
 
-<p>{{EmbedLiveSample("Setting_block_start_and_end_margins", 140, 140)}}</p>
+<p>{{EmbedLiveSample("Setting_block_start_and_end_margins", 140, 200)}}</p>
 
 <h2 id="Specifications">Specifications</h2>
 
diff --git a/files/en-us/web/css/margin-inline/index.html b/files/en-us/web/css/margin-inline/index.html
index 75812455e387dfc..0ae3a638f4ebbee 100644
--- a/files/en-us/web/css/margin-inline/index.html
+++ b/files/en-us/web/css/margin-inline/index.html
@@ -29,7 +29,7 @@
 margin-inline: unset;
 </pre>
 
-<p>This property corresponds to the {{CSSxRef("margin-top")}} and {{CSSxRef("margin-bottom")}}, or {{CSSxRef("margin-right")}}, and {{CSSxRef("margin-left")}} properties, depending on the values defined for {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, and {{CSSxRef("text-orientation")}}.</p>
+<p>This property corresponds to the {{CSSxRef("margin-top")}} and {{CSSxRef("margin-bottom")}}, or the {{CSSxRef("margin-right")}} and {{CSSxRef("margin-left")}} properties, depending on the values defined for {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, and {{CSSxRef("text-orientation")}}.</p>
 
 <h2 id="Constituent_properties">Constituent properties</h2>
 
@@ -60,30 +60,38 @@ <h2 id="Examples">Examples</h2>
 
 <h3 id="Setting_inline_start_and_end_margins">Setting inline start and end margins</h3>
 
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;p class="exampleText"&gt;Example text&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
 <h4 id="CSS">CSS</h4>
 
 <pre class="brush: css">div {
   background-color: yellow;
   width: 120px;
-  height: 120px;
+  height: auto;
+  border: 1px solid green;
 }
 
-.exampleText {
-  writing-mode: vertical-rl;
+p {
+  margin: 0;
   margin-inline: 20px 40px;
-  background-color: #c8c800;
+  background-color: tan;
+}
+
+.verticalExample {
+  writing-mode: vertical-rl;
 }</pre>
 
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div&gt;
+  &lt;p&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+&lt;div class="verticalExample"&gt;
+  &lt;p&gt;Example text&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
 <h4 id="Result">Result</h4>
 
-<p>{{EmbedLiveSample("Setting_inline_start_and_end_margins", 140, 140)}}</p>
+<p>{{EmbedLiveSample("Setting_inline_start_and_end_margins", 140, 240)}}</p>
 
 <h2 id="Specifications">Specifications</h2>