Should I define CSS margins in pixels or ems? Why? When?

Question

We have a CSS file with some rules similar to the following:

.directory-result ul
{
    margin-top: 20px;
    width: 60em;

}

.about-text
{
    margin-top: 1em;
    margin-bottom: 1em;
}

Everything is working ok, but we're wondering specifically about the inconsistencies between the margin-top values. One is 20px and the other is 1em.

Which is the best one to go with? What are the points I should consider when deciding which to use? Thanks.

Answer 1

em are used for better scalability of the page when the size of the elements depends on the page's scale. Especialy it's important for old browsers(e.g. IE6) and mobile platforms

px used for absolute values, while em is relative to the font size of particular element. 1em means one font-line, e.g. you have a box with font-size 12px that means that 1em will be equal to 12px

Also using px seems to be easier, since you know exact value, while em are inherits its value.

<p>Text</p>
<div class="box">
  <p>Lorem</p>
</div>

p {
  font-size: 1.2em;
}

.box {
  font-size: 1.2em;
}

In this case first <p> will have font-size eq to basic font-size * 1.2, and the second basic font-size * 1.2 * 1.2

Answer 2

They're simply two different ways of measuring. Em is linked to the font size (traditionally, 1em is roughly the width of the letter M in a given typeface), while px is pixels.

If you build everything using em, everything will scale accordingly when the user adjusts their font size (e.g. using IE's Page > Text Size menu). It also makes it easier to work to a vertical rhythm.

Pixels are better when you want to build something "pixel-perfect". Be aware that a CSS pixel doesn't always equal a screen pixel - mainly because modern browsers and mobile devices allow for zooming. This isn't usually a problem though because the entire page is scaled accordingly.

Whatever you do, make sure you're consistent throughout - it makes life much easier later on.

Answer 3

Also here is a very good in depth tutorial:

px – em – % – pt – keyword

Answer 4

The ems unit is relative to the current font size in the browser. So if the user increases the font size*, or if you change an element’s font size in the CSS, the margins should still look “right” in proportion to the text.

*(This ceases to matter if the user zooms the page instead of increasing the text size (as is the default in Firefox and Chrome now, and is an option in IE).

If you're using a margin to position something a set number of pixels away from something else, then you should obviously stick with pixels.

Answer 5

In this example directory-result ul represents a block - some sort of list/menu where pixel dimensions are quite important. We can’t always rely on em which defines the text size, because if we need 20px space due to some background image – well, we need 20px, no compromises.

Note that you can't create and save the image i.e. 10em wide, therefore I see no reason why should I use different units on a web page. It just creates confusion and later on it is very difficult to maintain the layout.

There is a one place though, where using em is advisable – I’m talking about text blocks. I’m guessing in your code about-text is placed within other text where adding top/bottom margin of 1em (height of text) makes sense. It’s like in any text editor (i.e. line spacing in MS Word) – text looks best when spacing between lines is defined by multiplying the height of text

So in my opinion – everywhere where you deal with design and you use images by default measured in pixels – usepixels for all padding/margin.

Everywhere where you deal with text inside a text block, and you want to add even spacing between the text nodes – useem.