Should I use pixels, em or neither? [closed]

Question

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.

Closed 9 years ago.

I'm trying to get the definitive answer on something in css. I'm trying to figure whether or not I should use

line-height: 1.5;

or

line-height: 1.5em;

or

line-height: 15px;

A few sites say not to specify em or px. So on that note, should I say something like:

margin: 10px;

or

margin: 10em;

What's your take?

Answer 1

Obviously it depends on many things.

As a general rule, use em for anything which is text-related, and px for anything which is decoration-related. So padding and borders should be px, text size, widths, heights, etc. should be em or % (or better yet, fluid layout).

Just imagine you're using large text display; what elements would you want to be bigger? Making the borders bigger is likely to leave less space for the text, so would really be a negative thing.

For line-height, you should use no units (or em, but that's a waste of 2 characters); it is a proportion of the font size. If you used px, you could end up with a line-height which is smaller than the text, which is bad.

This site raises an interesting point about unitless vs. em: http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/. The idea is that using em will set a fixed line-height for all children, even if the font size is different, whereas using no unit will use a line-height which is always relative to the font size. In most cases the latter would be preferable, but I can think of situations where you would want the former too.

Answer 2

Unitless numbers are preferred specifically for line-height as other units can have inheritance issues, as documented in the MDN line-height docs.

For other attributes, it will depend on exactly what you want, and whether you want things to be fixed sized, or sized relative to your text.

Answer 3

Em allows your site to be elasatic so iit resizes based on screen size, however, you if you really want this to work well then use EM for ALL your measurements on the page. I find I use EM for most of my layouts.

Answer 4

As much as possible do not use px in defining the margin. Use relative units like em or % because it is reflowable layout. We must always imagine and consider what the layout looks like on small devices and with resized text.

• For vertical text margins (margin-top or margin-bottom) use ems as this depends on font-size

• For horizontal widths use %

• For margins near the left border, we could use px if it’s less than 50px.

• Make sure that all images are wrapped in a div/figure element with img set to 100% and height set to auto

• Images with landscape dimensions are recommended to be set to 50% width and floated to either left or right

• Images with portrait dimensions are recommended to be set to 33% width and floated to either left or right