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
mdn · Mar 5, 2021 · 4fdf7b2 · 4fdf7b2
1 parent f6546f4
commit 4fdf7b2
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 26 deletions.
diff --git 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
@@ -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>