Difference between 'em' and 'ex' units
Minal | Apr 25, 2009 | Comments 2
‘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:
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:
Filed Under: Expression Web
Onload of page my antivirus put alert, check pls.
Thanks
[...] Where ‘em’ is defined to be the value of font-size given, ‘ex’ refers to the height of the lowercase x in the font used. For more details on ‘em and ex’ read Difference between ‘em’ and ‘ex’ units [...]