2 replies [Last post]
Last seen: 12 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: 7 hours 34 min ago
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9646
Points: 3714

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.



If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

thepineapplehead's picture
Last seen: 9 weeks 4 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