CSS supports multiple length units. They can be divided into two main categories: absolute length units (defining length in absolute dimensions independent of the display device); relative length units (defining length relative to other units known to the browser).
Absolute length measurements can be measured in five units: inches (in), centimeters (cm), millimeters (mm), points (point, written as pt), and character height (pica, written as pc). Point and type height are commonly used as typographic units, where 1pica=12pt. CSS defines 1pica as 1/72in, that is, 72pica=1in. This is also the definition used by Adobe's postscript language, which is commonly used by high-quality printers.
CSS also supports "absolute" lengths in pixels—pixels are a point on a computer display. However, due to differences in pixel density and user choice of display resolution (the same display screen can support a resolution of 640*480 or a resolution of 1024*768), the absolute size of the pixels will vary on different displays. Big difference. Thus, the length in pixels is actually display dependent. The advantage of using pixels as computer display units is that pixels are strictly defined units. However, pixel units can cause problems when printing web documents.
Absolute length units like inches and centimeters are very useful in print layout because they provide the absolute positioning needed to lay out a document on a fixed-size paper. It is for this reason that absolute length should not be used in electronic display documents. This is because the display will be different between 6inches*4inches and 21inches diagonal displays, and there is no guarantee that the browser will display the same length on a given display. Documents can be displayed using a fixed window area (the size of the window can be selected by the user). Taking into account such differences, it is appropriate to use units that automatically adjust to the size of the display area or text font size. Fortunately, there are three CSS length units that enable this behavior.
Relative length measurements can come in three forms: em units, ex units, and percentage. The em and ex units define the length relative to the size of the font. The em unit defines the length relative to the actual point size of the font: so, if the current font size is 12pt, then 1.5em = 18pt. In contrast, ex units define length relative to the x-height of the font: that is, relative to the height of the letter "x" in the current font. In this way, the ex size of a unit depends both on the size of the font and on the font family type, since the actual x height at a given point size will vary from font family to font family.
Currently, em units are more reliable than ex units: for the best compatibility between different browsers, it is best to use em units. But be aware that both em and ex units can cause printing problems.
The percentage unit is the third relative unit. This unit defines length as a percentage of the relative length. According to the CSS specification, the relevant length is either the font size of the parent unit or the width of the parent format unit - each case will vary depending on the characteristics of the question. There is an extremely important caveat: existing browsers do not calculate percentage values relative to the cell width, and thus do not implement percentage lengths correctly. Instead, all browsers calculate the font-independent percentage length as a percentage of the entire browser window width.
The format of the length value consists of a sign ('+' or '-', the default is '+') followed by a number and then a unit identifier (a two-character abbreviation). There are two forms of length units: relative and absolute units. Style sheets use relative units to make it easier to control scaling from one medium to another (such as from a computer to a laser printer). Percentage units and key values (such as 'x-large') have the same advantages. as follows:
H1 { margin: 0.5em } element font height
H1 { margin: 1ex } The height of the letter 'x'
in pixel units relative to the screen's graphics resolution. If the output device's pixel density differs significantly from a standard computer screen, the user will rescale the pixel values. The recommended pixel value is 90dpi at an arm's length from the reader. Child elements inherit the calculated result value instead of the relative value, such as:
BODY {
font-size: 12pt;
text-indent: 3em;
}
H1 { font-size: 15pt }
In the above example, the 'text-indent' value of 'H1' is 36pt, not 45pt.
==================================
em tag--emphasis tag
* em tags appear in pairs, with <em>Start with</em>
* Properties:
* Common -- general properties
* em is the abbreviation of emphasis