The best CSS unit Tutorial In 2024, In this tutorial you can learn Browser Support,Relative length,Absolute length,
CSS has several different units used to represent the length.
Some properties are set CSS length width, margin, padding, font-size, border-width, and so on.
Length and a digital units such as 10px, 2em, and so on.
Can not have spaces between numbers and units. If the length is 0, the unit can be omitted.
For some CSS properties, length can be negative.
There are two types of length units: relative and absolute.
The following table indicate the minimum browser versions that support units of length.
Unit of length | |||||
---|---|---|---|---|---|
em, ex,%, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
vmin | 20.0 | 9.0 * | 19.0 | 6.0 | 20.0 |
vmax | 26.0 | not support | 19.0 | not support | 20.0 |
Note: Internet Explorer 9 by non-standard name vm support vmin.
Relative length units specify a length relative to the length of the property of another. Depending on the device the relative lengths more suitable.
unit | description | Online examples |
---|---|---|
em | It is described with respect to the application of the font size of the current element, it is also relative length units. Usually the browser default font size is 16px, then 2em == 32px; | try it |
ex | English picture depends on the height of the small x | try it |
ch | The width of the number 0 | |
rem | Root element (html) The font-size | |
vw | viewpoint width, the width of the window, 1vw = 1% of the width of the window | try it |
vh | viewpoint height, window height, 1vh = window height of 1% | try it |
vmin | vw and vh smaller one. | try it |
vmax | vw and vh larger one. | try it |
% |
Tip: rem em and what difference does it?Except that the element rem set the font size is still relatively size, but just the opposite HTML root element. |
Absolute length unit is a fixed value, it reflects a real physical size. Absolute length units are highly dependent on the output medium, it does not depend on the environment (monitor, resolution, operating system, etc.).
unit | description | Online examples |
---|---|---|
cm | cm | try it |
mm | Millimeter | try it |
in | Inch (1in = 96px = 2.54cm) | try it |
px * | Pixel (1px = 1 / 96th of 1in) | try it |
pt | point, about 1/72 of an inch; (1pt = 1 / 72in) | try it |
pc | pica, about 6pt, 1/6 Yingcun; (1pc = 12 pt) | try it |
Perhaps the pixel is considered to be the best "device pixels" and this pixel length and you see the text on the display screen pixels irrelevant. px is actually a measure of an angle unit.