CSS in Unit em

Source: Internet
Author: User

First, Introduction

The dimensions in the CSS are given in W3cschool as follows:

Unit Description
% Percentage
Inch Inches
Cm Cm
Mm Mm

1em equals the current font size.

2em equals twice times the current font size.

For example, if an element is displayed in 12pt, then 2EM is 24pt.

In CSS, EM is a very useful unit because it automatically adapts to the font that the user uses.

Ex An ex is a font of x-height. (X-height is usually half the size of the font.) )
Pt LBS (1 pt equals 1/72 inches)
Pc 12-point movable (1 pc equals 12 points)
Px Pixel (a point on the computer screen)

It is important to see that the EM description is the most common.

The EM is used from the font that adapts to the user, 1em is equivalent to the current font size (font-size attribute) and 2EM is twice times the size of the current font.

Visible em is used as the relative size of a particular font.

Ii. examples

In the browser default style article many of the default styles, units are used by EM.

Now take one of the default style examples.

H1{font-size:2em;margin:. 67em 0}H2{font-size:1.5em;margin:. 75em 0}H3{font-size:1.17em;margin:. 83em 0}h4, P,blockquote, Ul,fieldset, Form,ol, DL, Dir,menu{margin:1.12em 0}h5{font-size:. 83em;margin:1.5em 0}h6{font-size:. 75em;margin:1.67em 0}H1, H2, H3, H4,h5, H6, B,strong{Font-weight:Bolder}

You can see the title series in addition to the font-weight bold and font-size settings and margin reservation. Now take a look at H1 's font-size and margin reservations.

By the way you can see H1 by default, font-size:32px;margin-bottom:21.44px; How does this value come about? Here's the answer.

Relative unit em is relative to the font size of the element itself. The only exception in CSS is the Font-size property, whose Em and ex values refer to the font size relative to the parent element.

Check out the default style of H1 in Chrome

H1 the default font-size:2em, relative to the parent element, where the parent element is the body of the font-size:16px; (default), so calculate the font-size:32px of H1.

The EM calculation of attributes other than font-size is relative to the font size of the element itself. So the Margin-bottom:0.67em calculated value is 0.67*32px=21.44px.

Third, resource links

Rem VS Px

The powerful EM in CSS

The author starof, because the knowledge itself in the change, the author is also constantly learning and growth, the content of the article is not updated regularly, in order to avoid misleading readers, convenient tracing, please reprint annotated source: http://www.cnblogs.com/starof/p/4742581. HTML has a problem welcome to discuss with me, common progress.

CSS in Unit em

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.