can anyone give me an example of why would we ever use em when we can user rem?

i am confused if anything really justified the em.

5 Replies

Myndi•3y ago

rem is the root element's font size. em is the font's size. It's good to use both, but understanding what they will be used on. When an element, like the size of a box, looks at the rem, like width: 1rem;, it will focus on the root font size, instead of em which would focus on the font size of itself. So, for the example above, if you're using em and adjust the size of the font, the width will also adjust. I have an example here: https://myntsu.github.io/characters.html But I won't make you go into the webpage, I will show you an example with a GIF.

Myndi•3y ago

https://gyazo.com/c536aa941afa002c1f6d4b54d2e48ddf

Gyazo

Myndi•3y ago

See how the margin at the bottom changes based on the font's size? I edited it in the dev tools to use em instead of rem. Originally I'm using rem there, to avoid this. Hopefully that helps to understand it better thumbsUP

Kevin Powell•3y ago

.title {
  font-size: 3rem;
}

.title > span {
  font-size: .75em;
}

.title {
  font-size: 3rem;
}

.title > span {
  font-size: .75em;
}

I don't care about the <span>s actual font-size, just how big/small it is related to it's parent, so em is perfect. I can adjust the parent font size and know it'll go up/down with it. margin and padding can also proove useful like @myntsu showed

AozenOP•3y ago

mmm thank you both

Gaming

Programming

can anyone give me an example of why would we ever use em when we can user rem?