lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

webIntroCssChapter2Title

lesson12Title

lesson13Title

webIntroCssChapter1Title

webIntroCssChapter3Title

webIntroCssChapter4Title

webIntroCssChapter5Title

# em and rem

Besides `px`, you can also use `em` and `rem` to specify the length of an element.

 

## `em` Unit

em is a relative length unit used in CSS. Relative means that the length value is based on another value.

The size of an em unit is determined by the size of the parent (containing) element.

If the font size of the parent element is 16px, then `1em` inside that child element would be equivalent to 16px.

 

## Example:

```css title="CSS"
.parent {
 font-size: 16px;
}

.child {
 font-size: 2em; /* Equivalent to 32px. (16px * 2) */
}
```

 

## `rem` Unit

`rem` stands for "root em" and is a relative length unit used in CSS.

Like `em`, it is a relative unit, but unlike `em` which is relative to the size of the parent element, `rem` is relative to the **root element** (commonly the `<html>` element) size.

For example, if the default font size of the webpage is 16px, `1rem` will be 16px anywhere on the page.

 

### Example

```css title="CSS"
html {
 font-size: 16px;
}

.box {
 width: 10rem; /* Equivalent to 160px. (16px * 10) */
}
```

 

## Summary

- `em` is determined by the size of the **parent** element.

- `rem` is determined by the **base size** of the entire webpage.

The `rem` unit is relative to the size of the root element (typically the `<html>` element), not the parent element. On the other hand, the `em` unit is determined based on the size of the parent element.

### The `rem` unit is relative to the size of the parent element.

em and rem

em Unit

Example:

rem Unit

Example

Summary

The rem unit is relative to the size of the parent element.

`em` Unit

`rem` Unit

The `rem` unit is relative to the size of the parent element.