# CSS Unit: em

Hello Fellow Codenewbies 👋,

If you've read my previous [post](https://adiati.com/css-units), you've also learned that `em` can cause problems since it creates *cascading effect*.
That's why we preferably avoid using it for `font-size`.

So when or where can we use `em`?

---

## An Example

Let's create:
- An `h1` and a `p` tag inside a `container`.
- Set the `font-size` of the `h1` to `3rem`
- Give `margin-bottom` of `1em` to the `h1`.

We will not set anything to the `p` tag because we only want to focus on the `margin-bottom` where we apply the `em` unit. 

%[https://codepen.io/adiati/pen/qBNJZPo]

Click on the CSS button on Codepen to see the code.

## Let's tweak it

Now change the `font-size` to `5rem`.

```css
h1 {
  font-size: 5rem;
  margin-bottom: 1em;
}
```

%[https://codepen.io/adiati/pen/GRxapLp]

When you see the rendered page, do you notice that the size of `margin-bottom` is the same as the size of  `h1`'s `font-size`?

But we've set the `margin-bottom` to `1em`. So the size should be 16px since we don't declare `font-size` anywhere except the `h1`, right?

## 💡 The Answer

Beside inheriting size from its parents, another thing to know about `em` is that it is ***relative to the `font-size` of its element***. 
<br>
Say we set a `font-size` for an element. And then set the value of `margin` or `padding` for the same element in `em`. This `margin` or  `padding` will be relative to the `font-size` *of the element*.

## Summary

When we do responsiveness, the use of `em` in `margin` or `padding` would be convenient. 
<br>
That's because we don't need to change the size of the `margin` or `padding` whenever we change the `font-size`.

---

Thank you for reading!
<br>
Last, you can find me on [Twitter](https://twitter.com/@AdiatiAyu). Let's connect! 😊