1. Home
  2. CSS unit

The best CSS unit Tutorial In 2024, In this tutorial you can learn Browser Support,Relative length,Absolute length,

CSS unit

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.

Browser Support

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

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
%

NoteTip: 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

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.

Hot Tools

Other Tools

Online Tutorial

Website Navigation

CSS unit
10/30