CODEWITHSUNDEEP
cssfont-size
Jake
Jake

Reputation: 1177

CSS question about em?

I'm trying to convert all of my site's margin values to em in place of pixels, but I'm having a hard time trying to figure out what 'em' actually is. I thought it was a set distance based on the users browser settings (default font-size), but a standard 1em is different when applied to h1 or ul for example. Any help?

Upvotes: 3

Views: 201

Answers (3)

bdukes
bdukes

Reputation: 155925

An em is based on the font size (the widthheight of a capital M), so it is a relative measurement, based on whatever font size applies to the element.

See the results of this markup on jsfiddle:

<div style="font-size:2em">2em<div style="font-size:2em">2em</div></div>
<div style="font-size:14px">2em<div style="font-size:2em">2em</div></div>

Upvotes: 3

amosrivera
amosrivera

Reputation: 26514

Stackoverflow relevant EPIC answer here: Is sizing fonts using "em" still relevant?

The em measure type will depend on the circumstances (the element parent, the element type / element css properties), read a complete and comprehensive explanation on this here:

http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

Upvotes: 0

Phillip Benages
Phillip Benages

Reputation: 671

"1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses"

http://www.w3schools.com/css/css_units.asp

Upvotes: 0

Related Questions