CSS Unit: em

Hello Fellow Codenewbies 👋,

If you've read my previous post, 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.

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.
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.
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!
Last, you can find me on Twitter. Let's connect! 😊

CSS Unit: em

Comments

Start To Think Responsive In CSS

Setting Up Width of Images In CSS

More from this blog

I Was Skeptical of AI. Then It Saved Me Hours of Writing.

From Helping Out to Taking Ownership: The Art of Sticking Around

The Curated, Automated Open Source Portfolio: How It’s Going

Open Source Engagement: What's Working Now?

Beyond Hacktoberfest: Building a True Open Source Journey

An Example

Let's tweak it

💡 The Answer

Summary

Command Palette

Comments

Start To Think Responsive In CSS

Setting Up Width of Images In CSS

More from this blog

An Example

Let's tweak it

💡 The Answer

Summary