From dc3803d353c0168f2e456c6073452f645bf65a51 Mon Sep 17 00:00:00 2001
From: "Muhamad @hafixo" <52647469+hafixo@users.noreply.github.com>
Date: Sat, 6 Mar 2021 00:53:05 +0800
Subject: [PATCH] Revert "Changes to margin-block and margin-inline (#2859)"

This reverts commit 4fdf7b2b5b8209d89af7254987e85c664c813b28.
---
 files/en-us/web/css/margin-block/index.html  | 34 ++++++++------------
 files/en-us/web/css/margin-inline/index.html | 34 ++++++++------------
 2 files changed, 26 insertions(+), 42 deletions(-)

diff --git a/files/en-us/web/css/margin-block/index.html b/files/en-us/web/css/margin-block/index.html
index 288f6d1563358ed..4e76630578160df 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>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>
+<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>
 
 <h2 id="Constituent_properties">Constituent properties</h2>
 
@@ -58,38 +58,30 @@ <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: auto;
-  border: 1px solid green;
-}
-
-p {
-  margin: 0;
-  margin-block: 20px 40px;
-  background-color: tan;
+  height: 120px;
 }
 
-.verticalExample {
+.exampleText {
   writing-mode: vertical-rl;
+  margin-block: 20px 40px;
+  background-color: #c8c800;
 }</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, 200)}}</p>
+<p>{{EmbedLiveSample("Setting_block_start_and_end_margins", 140, 140)}}</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 0ae3a638f4ebbee..75812455e387dfc 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 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>
+<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>
 
 <h2 id="Constituent_properties">Constituent properties</h2>
 
@@ -60,38 +60,30 @@ <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: auto;
-  border: 1px solid green;
-}
-
-p {
-  margin: 0;
-  margin-inline: 20px 40px;
-  background-color: tan;
+  height: 120px;
 }
 
-.verticalExample {
+.exampleText {
   writing-mode: vertical-rl;
+  margin-inline: 20px 40px;
+  background-color: #c8c800;
 }</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, 240)}}</p>
+<p>{{EmbedLiveSample("Setting_inline_start_and_end_margins", 140, 140)}}</p>
 
 <h2 id="Specifications">Specifications</h2>