Measurement Units in CSS

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:

1. Relative Lengths
   • em
   • ex
   • ch
   • rem
   • vw
   • vh
   • vmin
   • vmax
   • %
   • px
2. Absolute Lengths
   • cm
   • mm
   • in
   • pt
   • pc

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

Note: According to Can I Use, Partial support in IE9 refers to supporting “vm” instead of “vmin”.