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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.