When to use px vs em vs in ...on a margin property?

Posted on 2006-10-30
Last Modified: 2013-12-03
I am confused on when to use em or px when setting margin property on elements. For font settings I have been told that em is best to use as a general rule. But I see for margins a common setting seems to be in pixels (px). How do I determine whether I should use px or em for a margin? Is there a general rule for margin unit of measurement choices (px, em, in)?
Question by:LuluDev
LVL 19

Accepted Solution

VoteyDisciple earned 125 total points
ID: 17835616
The size of an 'em' depends on the size of the font (it's actually the height of a capital letter M in whatever font you're using.  This means anything on your page that ought to get bigger as font size increases, and that ought to get smaller as font size decreases, should likely be specified in em's.

You're also right that a lot of people don't bother with this, either because they don't understand it (which is too often the case), or because they're trying to nail down the exact look of the page, and to heck with people who want bigger or smaller fonts.

W3C offers some more refined tips about em sizing here:

The basic rule is whether the size you're specifying has to do with the look of the TEXT or the look of the PAGE.  I might, for example, specify an 8px margin around a box of some kind 'cause I want 8px margins on everything in my page.  The text can get bigger, and I still want pretty 8px margins.

If I'm specifying how wide I want a <label> or how far apart I want paragraphs, that's definitely gonna be in em, since a bigger font should definitely produce a wider <label> and farther-apart paragraphs.

What about in and pt sizes?  They come in useful for print styling, really.
LVL 30

Assisted Solution

GrandSchtroumpf earned 125 total points
ID: 17836899
1em is equivalent to the current font-size (not the size of M):
<div style="font-size: 20px;"><div style="height: 5em; background: red;">This div is exactly 100px high</div></div>
...but that's only true in when the text-size is set to 100%.

I use "em" for everything except for borders, and of course for images and other pixel-based elements.
LVL 19

Expert Comment

ID: 17836932
Sorry, I was referring to the typographic use of "em" in which M and the font size are the same thing; it's true there are plenty of modern fonts that do not include M and then that obviously won't be true.  For normal fonts they should be equivalent.

Sorry for any confusion.
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.


Author Comment

ID: 17837064
Thank-you for your responses and clarifications.
LVL 30

Expert Comment

ID: 17837634
I guess you got it mixed up with "ex", which is equivalent to the height of a lower case "x".
Typography can be confusing.
<< One em is sometimes said to be equal to the WIDTH of a capital "M". >>
Anyway, it's easier to simply think of it as the font-size of the current element without any other reference.
This does not change much for this particular question...

I agree with the rest of your first post.  People use "px" because they don't know better.  Just like people design fixed-width pages because they don't know how to code a liquid layout properly.

Actually, for font-size, i prefer to use percentages.  The result is exactly the same (font-size:1.5em is equivalent to font-size:150%).  Percentages just make more sense to me.
LVL 11

Assisted Solution

walkerke earned 50 total points
ID: 17843007
A little history lesson:

The term em originally referred to the width of a lower case "m" which often determined the point size of a font. In the olden days, when type characters were little lead or wooden blocks with the shape of the character extruding in reverse on one end, it was often difficult to choose a point size because different fonts would have different heights at the same size because of the difference in the width of the "m." A 12-point Helvetica character may be the same height as the same character in 16-point Park Avenue. Baselines often bounced up and down for the same reason. There were also 72.27 points per inch.

With the advent of digital typesetting, character heights and baselines became more important than the width of the "m" and the em space transformed into a space equal in width and height. In other words, a 12-point em space would be 12 points wide regardless of the width of the "m."

With the advent of desktop publishing, the typographer's point was replaced with the postscript point which was exactly 72 points per inch. Some applications still allow us to use the old typographer points if we so choose but no one does.

Although there are many techological advances I lament (color profiles to name just one), the evolution of point and the em space were truly advances.

Featured Post

VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question