diff --git a/curriculum/challenges/english/blocks/lecture-what-is-css/672acc3f6f3e3c4e31ec3e12.md b/curriculum/challenges/english/blocks/lecture-what-is-css/672acc3f6f3e3c4e31ec3e12.md index 2123a5af43d..3d85f958cba 100644 --- a/curriculum/challenges/english/blocks/lecture-what-is-css/672acc3f6f3e3c4e31ec3e12.md +++ b/curriculum/challenges/english/blocks/lecture-what-is-css/672acc3f6f3e3c4e31ec3e12.md @@ -5,7 +5,7 @@ challengeType: 19 dashedName: how-does-inline-block-work --- -# --description-- +# --interactive-- When working with CSS, you often encounter three different types of display behaviors for elements: `inline`, `block`, and `inline-block`. @@ -25,17 +25,17 @@ In short, the key difference between `inline` and `inline-block` is that `inline Let's take a look at an example. +:::interactive_editor + ```html + +
Inline-Block Element 1 Inline-Block Element 2
``` -In the above example, we have a `div` with a class of `container`. Inside that `div` element, we have two `span` elements. - -Here is the accompanying CSS: - ```css .inline-block-element { display: inline-block; @@ -52,6 +52,10 @@ Here is the accompanying CSS: } ``` +::: + +In the above example, we have a `div` with a class of `container`. Inside that `div` element, we have two `span` elements. + Each of the span elements is set to `display:inline-block` and has a width and height set as well. The inline-block elements will appear side by side because they behave like inline elements, but they also have a specified width and height, which gives them block-like properties. @@ -60,6 +64,17 @@ But, if you remove the `display: inline-block` property, neither the `height` no Here is the revised CSS: +:::interactive_editor + +```html + + +
+ Inline-Block Element 1 + Inline-Block Element 2 +
+``` + ```css .inline-block-element { width: 150px; @@ -75,6 +90,8 @@ Here is the revised CSS: } ``` +::: + In this code, we removed the `display: inline-block;` property but kept everything else intact. Here, the `span` elements revert to their default behavior as inline elements. As a result, the specified width and height are ignored, and the elements only take up the space needed for their content.