fix(css): update 'display' interactive demo (#2710)

* fix(css): update 'display' interactive demo * Apply suggestions from code review * Update live-examples/css-examples/basic-box-model/display.css Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * add short description in the output --------- Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
mdn · Jan 16, 2024 · 2125dd1 · 2125dd1
1 parent 4e9ae1a
commit 2125dd1
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/live-examples/css-examples/basic-box-model/display.css b/live-examples/css-examples/basic-box-model/display.css
@@ -3,8 +3,12 @@
   height: 100%;
 }
 
+code {
+  background: #8888;
+}
+
 #example-element {
-  border: 3px solid #00f;
+  border: 3px dashed orange;
 }
 
 .child {

diff --git a/live-examples/css-examples/basic-box-model/display.html b/live-examples/css-examples/basic-box-model/display.html
@@ -36,13 +36,19 @@
 </section>
 
 <div id="output" class="output large hidden">
+  <p>
+    Apply different <code>display</code> values on the dashed orange-bordered <code>div</code>, which contains three
+    child elements.
+  </p>
   <section id="default-example" class="default-example">
     <div class="example-container">
+      Some text A.
       <div id="example-element">
-        <div class="child">One</div>
-        <div class="child">Two</div>
-        <div class="child">Three</div>
+        <div class="child">Child 1</div>
+        <div class="child">Child 2</div>
+        <div class="child">Child 3</div>
       </div>
+      Some text B.
     </div>
   </section>
 </div>