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

Reuven Kishon
Reuven Kishon
5,270 Points

Best practices when choosing units for CSS properties such as line height/font-size/margin/padding/border/etc?

Hello there,

I named the properties I'm aware of, but there are likely a lot more. What I'm looking for is whether or not there are some hard and fast rules that most web developers follow when selecting units for the aforementioned CSS properties, and any others like those mentioned that I hadn't listed.

Maybe there's a website that talks about this?

Joshua Bulmer
Joshua Bulmer
2,473 Points

I'm just starting out myself but if I had to put my two cents in I would say what you use depends on what you are doing; for example you would use relative units for making an image scale.

The below link gives a brief look at what to use but like anything in design there is no hard set rule to everything. I think the best thing we can do is to understand every unit and its mechanics and then make an informed decision when designing.

http://stackoverflow.com/questions/15850988/whats-the-preferred-unit-when-doing-responsive-design

Cheers!

1 Answer

Sam Donald
Sam Donald
36,305 Points

Back when everyone was viewing the web through the same displays you would use fixed units like px. Today you need to cater to an ever growing multitude of displays, probably some you haven't even heard of. For this we need relative units.

What you want to do is get in the habit of using relative units, rem and em, % and vh/vw.

By using relative units in the right way you will be able to write less code for todays multitude of displays. At first you may find yourself confused by some of the output you get. But remember CSS cascades, so when you get confused just look up.

Here's a really good article to read - REM vs EM – The Great Debate

Reuven Kishon
Reuven Kishon
5,270 Points

Thanks for that very thorough response and article for further reading!

Thank you so much for sharing this article. I just read it now and what I thought that em's are easy, by reading the article it made me aware that it is not. It is very tricky after all. I would not have known to watch out for these complexities about em's. I have bookmarked that article so I can read it over and over again.