PX and EM differences-the use of CSS in Font-size

px Pixels (Pixel). Relative length units. Pixel px is relative to the display screen resolution .

EM is the relative length unit. font-size the size of the parent setting , relative to the font size of the text within the current object. If the font size of the current inline text is not artificially set, the default font size is relative to the browser . (quoted from CSS2.0 manual)

The default font height for any browser is 16px. All non-adjustable browsers are compliant with: 1EM=16PX. So 12px=0.75em,10px=0.625em.

To simplify the conversion of font-size, you need to declare font-size=62.5% in the body selectorin the CSS, which makes the EM value 16px*62.5%=10px, so 12px=1.2em, 10px=1em, That means you just have to divide your original PX value by 10 and then put EM in as the unit.

Note: font-size:62.5% is indicated in body;

1. You can then use the EM as PX, X10 is good, of course, if the parent tag does not set font-size,

2. Once the parent element has a set font size, the value x in front of EM is equal to the parent element font multiplied by x

3. Relative closest to the parent element, and can be superimposed down.

In the following case comparison you can see more clearly the use of PX and EM

1 <Bodystyle= "font-size:62.5%;">2    3 <Divstyle= "width:200px; height:300px; margin-top:20px; border:1px solid #f00; font-size:2em; ">4 the text here is the first level of size5     <Divstyle= "FONT-SIZE:0.9EM;">6 the text here is the second level, relative to the first level x90%;7     <Pstyle= "FONT-SIZE:0.8EM;">The text here is the third level, relative to the second level x80%</P>8     </Div>9 </Div>
Ten <Divstyle= "width:200px; height:300px; margin-top:20px; border:1px solid #f00; font-size:20px; "> One the text here is the first level of size A     <Divstyle= "FONT-SIZE:18PX;"> - the text here is the second level. -     <Pstyle= "FONT-SIZE:14PX;">The text here is level three.</P> the     </Div> - </Div>

 - </Body>

PX and EM differences-the use of CSS in Font-size