diff --git a/curriculum/challenges/english/blocks/lecture-styling-lists-and-links/672aa6441bcd3758e9f52ae0.md b/curriculum/challenges/english/blocks/lecture-styling-lists-and-links/672aa6441bcd3758e9f52ae0.md
index e3b002abb71..c4509d10cc4 100644
--- a/curriculum/challenges/english/blocks/lecture-styling-lists-and-links/672aa6441bcd3758e9f52ae0.md
+++ b/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
Item 1
@@ -23,16 +25,32 @@ Let's take a look at an example of an unordered list with three list items.
```
+:::
+
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
+
+
+
+
Item 1
+
Item 2
+
Item 3
+
+```
+
```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
+
+
+
+
Item 1
+
Item 2
+
Item 3
+
+```
+
```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--