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

Posted by rr21
rr21
6,398 Points

When to use % or px

When is it appropriate to use either % or px

I've seen in some videos where for example the width value for a property sometimes has a % then another time it has px

What scenario is it better to use one or the other?

2 Answers

Jesus Mendoza
Jesus Mendoza
23,289 Points
Jesus Mendoza
Jesus Mendoza
23,289 Points

% is used to make an element fluid. If you give an element 50% width, it will always be 50% the size of the parent element, even if the screen size or the parent size changes. On the oter hand, px units never change. Elements with size defined in pixel units are "static", they never change size even if the screen size or the parent containers change size.

Owa Aquino
Owa Aquino
19,277 Points
Owa Aquino
Owa Aquino
19,277 Points

Personally I use percentage(%) if my goal is to create responsive websites. I use it on my columns or layouts. Like margins, width, height and images.

Pixels(px) I use them when I want a certain element to be fixed and does not change. Like buttons and sometimes images.

For my fonts sizes and headers I use em / rem so it'll be responsive too.