
CSS offers a number of different units for expressing length. It includes absolute units such as inches, centimeters, points, and so on, as well as relative measures such as percentages and em
units. You required these values while specifying various measurements in your stylesheet.

It supports various measurement units which are listed below:
Using em
This measurement unit is related to typography. It based on the current typefaces capital letter “M”. Although the length doesn’t change when you change font-family, it does change when you change the font-size.
Example
div {
width: 40em;
}
1em would be: 1em = 16px = 0.17in = 12pt == 1pc = 4.2mm = 0.42cm
Using ex
The ex
is used to define a measurement relative to a font’s x-height. The x-height is determined by the height of the font’s lowercase letter x.
Example
.div {
width: 40ex;
}
Using ch
It is similar to ex
but it changes the size as the font-family changes.
Example
div {
width: 60ch;
}
Using rem
It is similar to em
, but it is always relative to the “root” element.
Example
div {
width: 60rem;
}
Remember that, some browser doesn’t support rem unit such as IE 8, Safari 4, or iOS 3.2.
Using vw
The vw
unit is used to define a viewport width. It is similar to percentage (%).
Example
body {
width: 10vw;
}
Using vh
CSS vh
unit is used to define a viewport height. It is similar to vw
.
Example
body {
width: 10vh;
}
Using vmin
This value will be whichever but it is smaller than vw
or vh
.
Example
body {
width: 10vmin;
}
Using vmax
This value will be whichever but it is greater than vw
or vh
.
Example
body {
width: 10vmax;
}
Using %
A length set in percentage is based on the length of same property of the parent element.
Example
.page-wrap { width: 50%; }
Using px
CSS has nothing to do with the screen resolution. It’s actually an angular measurement. It is not related to the current font, screen resolution and also not related to the absolute units.
Example
.block {
width: 300px;
}
Using cm
The cm
unit is used to define a measurement in centimeters. It is more familiar and useful as a physical measurement.
Example
.block {
width: 20cm;
}
1cm = 37.8px
Using mm
You can also define size in millimeter using mm
unit.
Example
p {
width: 200mm;
}
1mm = 0.1cm = 3.78px
Using in
CSS in
unit is used to define measurement in inches.
Example
body {
width: 3in;
}
1in = 96px
Using pt
You can define element size or font size in points similar to pixels. A point is a physical measurement equal to 1/72 of an inch.
Example
p {
font-size: 120pt;
}
Using pc
Again same story for pc
(pica) as points 1pc == 12pt
.
Example
p {
width: 24pc;
}
Conclusion
It will be totally up to you that which units assign to which properties, and to take into consideration accessibility, media type, different display resolutions, and compatibility, among other things. Here is a good post to read about CSS https://css-diary.com/css-gradient-ball/
Browser Support
Units | |||||
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 | Nope | 19.0 | Nope | 20.0 |
Note: According to Can I Use, Partial support in IE9 refers to supporting “vm” instead of “vmin”.