2 replies [Last post]
Last seen: 9 years 41 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: 2 hours 6 min ago
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9224
Points: 3230

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.



Unplanned code results in a tangled wad of brain-cramping confusion.

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

thepineapplehead's picture
Milton Keynes
Last seen: 10 weeks 3 days ago
Milton Keynes
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