Solved

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

Posted on 2006-10-30
6
2,959 Views
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)?
0
Comment
Question by:LuluDev
6 Comments
 
LVL 19

Accepted Solution

by:
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: http://www.w3.org/QA/Tips/font-size


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.
0
 
LVL 30

Assisted Solution

by:GrandSchtroumpf
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.
0
 
LVL 19

Expert Comment

by:VoteyDisciple
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.
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 

Author Comment

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

Expert Comment

by:GrandSchtroumpf
ID: 17837634
http://www.w3.org/TR/CSS21/syndata.html#value-def-length
I guess you got it mixed up with "ex", which is equivalent to the height of a lower case "x".
Typography can be confusing.

http://en.wikipedia.org/wiki/Em_%28typography%29#Incorrect.2FAlternate_Definitions
<< 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.
0
 
LVL 11

Assisted Solution

by:walkerke
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.
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

760 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now