feat(curriculum): Add interactive examples to list items & line-height lesson (#62803)

curriculum/challenges/english/blocks/lecture-styling-lists-and-links/672aa6441bcd3758e9f52ae0.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: how-do-you-space-list-items-using-margin-or-line-height
 ---
 
-# --description--
+# --interactive--
 
 Margins and line-height are essential for spacing list items to enhance readability and visual appeal.
 
@@ -15,6 +15,8 @@ Margins can be used to create space between list items by applying margin proper
 
 Let's take a look at an example of an unordered list with three list items.
 
+:::interactive_editor
+
 ```html
 <ul>
   <li>Item 1</li>
@@ -23,16 +25,32 @@ Let's take a look at an example of an unordered list with three list items.
 </ul>
 ```
 
+:::
+
 By default, HTML will not apply that much spacing between the list items.
 
 To apply some spacing to the bottom of each list item, you can use the `margin-bottom` property like this:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+
+<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3</li>
+</ul>
+```
+
 ```css
 li {
   margin-bottom: 40px;
 }
 ```
 
+:::
+
 In this example, `40px` of margin will be applied to the bottom of each list item inside the unordered list.
 
 Another way to space out list items would be to use the `line-height` property.
@@ -47,12 +65,26 @@ To control the spacing between individual list items, you would use `margin` or
 
 Using the same unordered list from earlier, here is an example of applying `line-height` to the list items:
 
+:::interactive_editor
+
+```html
+<link rel="stylesheet" href="styles.css">
+
+<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3</li>
+</ul>
+```
+
 ```css
 li {
   line-height: 2; 
 }
 ```
 
+:::
+
 In this example, `line-height: 2;` sets the line height to be twice the font size, creating more vertical space within each list item.
 
 # --questions--