Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Basics (2014) The Box Model Padding

Paula Mourad
Paula Mourad
5,154 Points

Padding % and EM

Hi!

If I'm using "em" in my site, for font-size; does that mean I should use padding %? When is it better to use padding px vs padding %?

Thanks!

4 Answers

Kevin Korte
Kevin Korte
28,111 Points

I generally have all of my padding in px. I've not found many cases where a percentage based padding was nice. For instance, padding between menu items, I don't necessarily want that padding to be 2px on smaller screens, and 22px on larger screens, both will appear wrong. I'd rather them fixed at 10px, or 12px regardless of screen size.

You could use em's, but IMO it just adds unnecessary complexity to something like this.

There are always use cases and arguments that can be made for either, but that's just my humble opinion, and view on it.

Aurelian Spodarec
Aurelian Spodarec
10,789 Points

HI Paula,

So, % is used for responsive layout. And px is used for , I'd say still a responsive layout, but differently.

I'll try to explain it the best I can.

Well, look at my site here that i have done.

Use the inspect tool.

You use % or px on padding depends on the effect you want to achieve.

When I want to have a responsive view, I could use % for it to scale relatively on the view port.

Well, it's hard to explain, but if you look at my site up there, and look at each element, you can hopefully see what i have done there.

You don't have to use % or px to containers, or margin and paddings, as that's not related with font in any way, at lest to my knoweldge.

px is good to make some blocks , like on my website, each section has like 50px padding, but then, if i had 50% padding, it will take 50% of the screen view port, which is a ncie effect depending on the desing.

Hopefully that helps somewhat.

Daniel Chacon
Daniel Chacon
1,559 Points

Question: The % value measures based on the width of the box and because of this when you resize the browser the left and right sides also resize. Is there a way to also have the top and bottom padding resize when you resize the browser?

Hi Paula,

I found this great article that explains the differences between em and % units. http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/