diff --git a/curriculum/challenges/english/blocks/lecture-working-with-relative-and-absolute-units/672aa7194614b55c16b879a1.md b/curriculum/challenges/english/blocks/lecture-working-with-relative-and-absolute-units/672aa7194614b55c16b879a1.md index cb0825b453a..7f5d7118723 100644 --- a/curriculum/challenges/english/blocks/lecture-working-with-relative-and-absolute-units/672aa7194614b55c16b879a1.md +++ b/curriculum/challenges/english/blocks/lecture-working-with-relative-and-absolute-units/672aa7194614b55c16b879a1.md @@ -5,7 +5,7 @@ challengeType: 19 dashedName: what-are-absolute-units-in-css --- -# --description-- +# --interactive-- As you design your pages, you will work with different properties like widths, heights, padding, margins, and more. When you define these properties, you will need to specify the length units of measurement you want to use. @@ -19,6 +19,13 @@ It is important to note that while 1px is standardized as 1/96th of an inch for Let's take a look at an example of using pixels to set the width and height for a box: +:::interactive_editor + +```html + +
+``` + ```css .box { width: 100px; @@ -27,13 +34,23 @@ Let's take a look at an example of using pixels to set the width and height for } ``` +::: + In this example, we have a red box with a width and height set to `100px`. The dimensions for this box will stay the same regardless of changes pertaining to the screen size. So, if you are on a device with a small screen, the box will still be `100px` wide. If you are on a large desktop screen, the box will still be `100px` wide. So, when should you use absolute units like pixels? Well, it depends on the situation. But generally you will use pixels where you need precise control over element dimensions, spacing, and layout. Sometimes you might use pixels for margins, padding, and borders. -Here is an example of using pixels to set the margin for a box: +Here is an example of using pixels to set the margin for two boxes: + +:::interactive_editor + +```html + +
+
+``` ```css .box { @@ -44,6 +61,8 @@ Here is an example of using pixels to set the margin for a box: } ``` +::: + Remember that margin is the space outside of the box. So, in this example, the box will have a margin of `10px` on all sides. Other types of absolute units include the following: