Jump to content
Sign in to follow this  
ben03

Em 7 Rem Confusion

Recommended Posts

Hi there,

  I just need something clearing up: I thought giving a font a rem made it relative to the font size set on the body. Then, giving that text's container an em would make it resize based on the contained text's size.

However the text only appears to resize when the body font size is adjusted when set with an em. Am I doing this the wrong way round, or worse missing the point of em's and rem's altogether?

Help appreciated here :)

Share this post


Link to post
Share on other sites

You seem to have mixed them up. An element set in rem is always relative to the root of the document and nothing else, all of its ancestors are ignored. The em is relative to the font size of the element's immediate parent.

Share this post


Link to post
Share on other sites

Ok Ingolme, I think I understand.

What I had been doing was the following, in the hope that by increasing the body font size would lead to all the values increasing proportionately (that is the point of rem and em, right?). But it wasn''t working...

body{font-size: 16px;}

button{font-size: 0.825rem; padding: 1em 1.2em;}

 

What would I need to do to achieve this?

Thanks

Share this post


Link to post
Share on other sites

rem uses the font size of the root of the document, that's not <body>, it's <html>.

Share this post


Link to post
Share on other sites

and setting that in px would allow the tools to manipulate the base font size?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×