Padding % and EM

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.

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.

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/