CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-07-13 21:15:35 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

feat(curriculum): Add interactive examples for absolute units lesson (#62960)

Browse Source
This commit is contained in:
Vinson Pham 2025-10-23 10:02:05 -05:00 committed by GitHub
parent 68465070a3
commit 59edf1571e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 21 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
curriculum/challenges/english/blocks/lecture-working-with-relative-and-absolute-units/672aa7194614b55c16b879a1.md
View File

@ -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
<link rel="stylesheet" href="styles.css" />
<div class="box"></div>
```
```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
<link rel="stylesheet" href="styles.css" />
<div class="box"></div>
<div class="box"></div>
```
```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: