CSS in units em and REM

I. INTRODUCTION 1, EM

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

Unit	Description
%	Percentage
Inch	Inches
Cm	Cm
Mm	Mm
Em	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.

2. rem

The mobile page is almost inseparable from this unit. Rem means "root EM", which literally refers to the size of the root element em . In the context of a Web document, the root element is your HTML element. If there is no reset, the HTML default font-size:16px.

We can easily use relative font size, and also avoid the clutter of using nested em structures.

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;< Span style= "COLOR: #ff0000" > 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 units em and REM