Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Understanding Values and Units Rem Units

Paul Kelly
Paul Kelly
3,541 Points
Posted by Paul Kelly
Paul Kelly
3,541 Points

em vs. %, what are % relative to?

I totally get ems, and compounded ems in nested elements, but is does the same apply for %s?

To put it another way, is % relative to the default size/set size? so 200% = 32px, or is it relative to the size set by its parent element?

It just seems like two ways of saying the same thing, why is one better than another?

It felt like Guil glossed over using % to define font size and was giving the hard-sell on ems, but I can't see any difference between them, except one is a ratio and one is a percentage, seems pointless.

1 Answer

cacarrizales
cacarrizales
8,051 Points
cacarrizales
cacarrizales
8,051 Points

Using % creates fluid widths and works better with responsive web pages. When using %, it can be either related to the parent element, or the root font size (which is normally 12px). Consider this code:

<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <title>Testing</title>
    </head>
    <body>
        <h1>Hello</h1>
        <header>
            <p>Testing</p>
        </header>
        <p>Testing again</p>
    </body>
</html>

html {
    font-size: 1rem;
}

header {
    font-size: 300%;
}

h1 {
    font-size: 200%;
}

p {
   font-size: 200%;
}

by setting the font size of the html element, we are changing the default font size of the entire web page, and this will affect all fonts due to inheritance. Also, the header's font size is 300% larger than the html element's font size, but the font size of the p element within the header is 200% larger than the header's font size, since the header has a defined font size percentage.

Paul Kelly
Paul Kelly
3,541 Points
Paul Kelly
Paul Kelly
3,541 Points

Isn't that just the same as using em though?