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

HTML How to Make a Website Customizing Colors and Fonts Resize Text

Matthew Carson
Matthew Carson
2,052 Points

Why does Nick use em's for the font-size and px's for the margin & padding?

Why does Nick use em's for the font-size and px's for the margin & padding? Can you and should you use a relative unit for the margin?

3 Answers

The reason for not using em's with margins and padding may be because they are a relative unit. Em's are relative to its parent em value and since pixels are fixed, they are not directly affected by parent unit values. You can em's for margins or paddings, but it would get way too confusing once you start adding margins and paddings all over the page. Percents will be important when styling margins and paddings for responsive designs.

As for font size, em's and rem's (you will learn this later if you haven't already) are nice, because they are allow you to quickly set relative values that work with other parent font-sizes on the page. When you get into responsive design, if you need to make fonts smaller or larger, using em's and rem's only really require you to change a parent's em/rem value in order to change them all since they are relative.

It's fine to use px's for margins in a fixed-width design. But for responsive designs you should really be using em's / relative units.

I think by the end of the course, margins are converted from px's to em's, you may just be jumping the gun a little. Pretty sure this is done in the 'Responsive Web Design and Testing' section.

Hope this helps :)

Lusako Njwaba
Lusako Njwaba
1,064 Points

Thanks Kenny and James for clarification.

I had the same question as Mathew. I think the confusion comes in when the instructor says setting the -px in the h2 margin is a technique to align an element closer to the its adjacent elements. The first thing that popped into my mind was "isn't -5px fixed? what about the issue of different resolutions?"