Saffron Stroke - Your Web Design Resource » relative units http://www.saffronstroke.com Design Blog Wed, 11 Jan 2012 06:36:24 +0000 en hourly 1 http://wordpress.org/?v=3.0 Difference between 'em' and 'ex' units http://www.saffronstroke.com/2009/04/25/difference-between-em-and-ex-units/ http://www.saffronstroke.com/2009/04/25/difference-between-em-and-ex-units/#comments Sat, 25 Apr 2009 12:54:59 +0000 Minal http://saffronstroke.com/?p=463


‘em’ and ‘ex’ units are both relative units; viz. they are measured in relation to other values.

In CSS, one ‘em’ is defined to be the value of font-size of a given element. For example, if the font-size of a paragraph element is 12 pixels then 1em = 12 px.

But as I already mentioned ‘em’ value depends on the element with which it is used. Consider following example.

p {font-size: 12px; padding-left: 1em;}

h1 {font-size: 22px; padding-left: 1em;}

The output would be: 

em_padding

This is because; the value of ‘em’ is relative to its parent. So the left padding for the paragraph was 12px whereas left padding for Heading 1 was 22px.

‘ex’ on the other hand refers to the height of the lowercase letter ‘x’ in the font that is assigned for a given element. Different fonts have different heights for ‘x’ even if their font-size is same. Hence the value of ‘ex’ differs from font to font. Take a look at these fonts:

ex_sizes

]]> http://www.saffronstroke.com/2009/04/25/difference-between-em-and-ex-units/feed/ 3