2 replies [Last post]
Last seen: 11 years 4 weeks ago
Joined: 2005-01-06
Posts: 29
Points: 0

i have seen the unit "em" in a template, i'm wondering what it means? the units I know are px, cm, in, and %

.box {
   width: 500px;
   margin: 4em auto;


gary.turner's picture
Last seen: 4 hours 31 min ago
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9506
Points: 3557

what does the unit "em" mean?

For html/css purposes, the em is a square box the size of the font. It is used as a relative measure. For example, if the default font size is 16px, 1em is a 16px square box and is a 16px font. If you do this, h1{font-size:2em; margin:2em;}, then the header will be a 32px font size (2x the inherited size) and the margin will be 64px (based on the computed size).

Being relative and having different references can make for unexpected consequence. For example, again,
<div style="font-size:.7em;"> 16x.7=11.2 or 11px
<p style="font-size:.7em;"> 11.2x.7=7.84 or 8px

The 8px size just might be a gotcha if you didn't think about the inheritance.

Gotchas or no, ems are still about the best way to go. They leave you in sync with your user's desired font size.



UI design should be egoless; if you succumb to the temptation to show off, you’re probably doing it wrong. (from ESR)

There are enough html & css demos and tutorials to be interesting. Please visit.

thepineapplehead's picture
Last seen: 27 weeks 6 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

what does the unit &quot;em&quot; mean?

However they can be a pain for fixed-width layouts.

For example, say you needed a gap above all the content on your site, to match the background image. If you set this to something like 8px, it will stick at 8 pixels. However, if you use something like 0.3em, and the user resizes the font (larger or smaller) the gap will change accordingly.

Try it out and see.

Verschwindende wrote:
  • CSS doesn't make pies