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

Ariana Maksimović
Ariana Maksimović
2,797 Points
Posted by Ariana Maksimović
Ariana Maksimović
2,797 Points

Relative lengths (CSS) and %

Hi,

while learning CSS and checked on other links I still don't understand two things.

  1. Relative lengths. I don't get it by what are they relative (also em and rem values, what both are dependent of)

  2. What is the difference if you for example use px or %? I know px will stay same no matter what but what about %.

If would be nice that explanation would be easy as possible :)

Thanks

2 Answers

Reggie Williams
STAFF
Reggie Williams
Treehouse Teacher
Reggie Williams
Reggie Williams
Treehouse Teacher

Hey Ariana Maksimović !

  1. Relaltive lenghts are relative to another element. Rem units are relative to the root elements size while ems are relative to their parent or the element they are inside of. If an h1 element has a font-size of 2em it would be twice the size of the font set on the element the h1 is inside of.

  2. You're correct that px stay the same as they are an absolute unit. % units are also based on their parent elements. AN image with a width of 50% would be half as wide as the element it is contained in.

Ariana Maksimović
Ariana Maksimović
2,797 Points
Ariana Maksimović
Ariana Maksimović
2,797 Points

Hello Reggie Williams,

FINALLY :) I got it. I couldn't find better explanation. Really thank you :)