2 replies [Last post]
soniclnd
Offline
Regular
Last seen: 9 years 42 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;
   } 

thanx

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 37 min 39 sec ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9236
Points: 3242

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.

cheers,

gary

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
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 11 weeks 6 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