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 use `em` and `rem` to specify the size of elements.

 

## em Unit

`em` is a relative unit of length used in CSS.

Relative means that the value is based on another value.

The size of the `em` unit is determined by the size of the `parent element`.

If the font size of the parent element is `16px`, then `1em` within a child element represents `16px`.

 

```css title="Comparison of px and em units"
.parent {
 font-size: 16px;
}

.child {
 font-size: 2em; /* Equals 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** (typically the `<html>` element).

For example, if the default font size of the webpage is `16px`, then `1rem` is 16px, regardless of its context.

 

### Example

```css title="Example of rem units"
html {
 font-size: 16px;
}

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

 

To summarize, `em` is determined by the size of the **parent element**.

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

The `rem` unit is based on the size of the root element (usually the `<html>` element), not the parent element. In contrast, the `em` unit is determined by the size of the parent element.

### Does the `rem` unit correspond to the size of the parent element?

em and rem

em Unit

rem Unit

Example

Does the rem unit correspond to the size of the parent element?

Does the `rem` unit correspond to the size of the parent element?