Common CSS Units

1em=12pt

2em=24pt

Body {
font-size:14px;
}
div {
Font-size:1.2em; Calculated at 14PX * 1.2, or 16.8px
}

The font size in the div is 1.2em, which is 1.2 times times the size of the font that the div inherits from the parent class element. Here, the body font is 14px, then the font size of the div is 1.2*14=16.8px.

Note: The font size of a nested element is defined with an EM-level one-layer hierarchy

The solution is to change the REM by EM.

Rem

The R in rem represents the root element, and its value is the font size set by the root element. In most cases, the root element is HTML.

HTML {

Font - size : 14px;

}

Div {

Font - size : 1.2rem;

}

REM is not only suitable for font size, but also for grid layout.

Width: 70rem; //* 14px = 980px

You can use REM based on the font size of the HTML root element as the entire grid layout or the size unit of the UI library, and then use EM units in other specific places. This will bring you more font size and scalability controllability

Letter-spacing and Word-spacing

Both the letter-spacing and Word-spacing properties are used to add whitespace in their corresponding elements. Letter-spacing adds white space between letters, and word-spacing adds white space between each word. Please note that word-spacing is not valid for Chinese.

Letter-spacing

Grammar:
Letter-spacing:normal | Length
Parameters:
Normal: Default interval
Length: A value consisting of a floating-point number and a unit identifier that is allowed to be negative. See Length Units
Description
Retrieves or sets the interval between the text in an object.
This property adds the specified interval to each text, but the last word is excluded.
The corresponding script attribute is letterspacing.

Word-spacing

Grammar:
Word-spacing:normal | Length
Parameters:
Normal: Default spacing
Length: A value consisting of a floating-point number and a unit identifier that is allowed to be negative. See Length Units
Description
Retrieves or sets the number of spaces inserted between words in an object. Available only on Mac platforms for ie4+.
The corresponding script attribute is wordspacing.

Comparison:
Letter-spacing defines the distance between the word and the word.
Word-spacing is the width of the space between the control word and the word.



Common CSS Units