Unit em in css and unit em in css

Unit em in css and unit em in css
I. Introduction

The unit of dimensions in css in w3cschool is as follows:

Unit	Description
%	Percentage
In	Inch
Cm	Centimeter
Mm	Millimeters
Em	1em is equal to the current font size. 2em is twice the current font size. For example, if an element is displayed in 12pt, 2em is 24pt. In CSS, em is a very useful unit because it can automatically adapt to the fonts used by users.
Ex	An ex is the x-height of a font. (X-height is usually half the font size .)
Pt	Lb (1 pt equals 1/72 inch)
Pc	12-point active words (1 pc equals 12 points)
Px	Pixel (a point on the computer screen)

It is important to know the description of em at most.

Em is used to adapt the font used by users. 1em is equivalent to the current font size (font-size attribute), and 2em is twice the current font size.

It can be seen that em is used as the relative size of a specific font.

Ii. Example

Many default styles are in the default style of the browser, and the Unit is em.

Now let's take a default style example.

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 }

We can see that in addition to font-weight bold, the title series also includes font-size settings and margin reservation. Now let's take a look at the font-size and margin reserves of h1.

 

By default, we can see that in h1, font-size: 32px; margin-bottom: 21.44px; how does this value come from? The answer is as follows.

The relative unit em is the font size relative to the element itself. The only exception in css is the font-size attribute. Its em and ex values indicate the font size relative to the parent element.

Let's take a look at the default h1 style in chrome.

The default font-size: 2em of h1 is relative to the parent element. Here, the font-size of the parent element body is 16px; (default). Therefore, calculate the font-size: 32px of h1.

Except font-size, the em of other attributes is calculated relative to the font size of the element. So the calculated value of margin-bottom: 0.67em is 0.67 * 32px = 21.44px.

 

Iii. resource links

Rem VS Px

Powerful em in css

 

Starof, the author of this article, is constantly learning and growing because of the changing knowledge. The content of this article is also updated from time to time. To avoid misleading readers and facilitate tracing, Please repost the Source: Ghost.