CSS Units Tutorial

Measurement of properties like font-size, line-height, margin, padding, width, height, etc. are done in CSS using length units. There are four basic types of length units used in CSS – relative, absolute, angle and time. In this article, let us explore how these length units work along with examples.

Related: How to create scroll to top widget with CSS and jQuery?

Relative Length Units

em	Calculated relative to the current font-size of the parent element. For example, 2em indicates 2 times larger size of the current element’s font-size.
ex	Calculated relative the height of the current font-size.
px	Pixels size is calculated relative to the viewing device. For low dpi devices 1px is one dot in the display. For high-resolution screens, 1px may indicate multiple device pixels.
%	Percentage value relative to any element. For example, 50% width of the container.
rem	Relative to the font-size of the root element.
vw	Measured as a percentage value of the viewport’s width. If the viewport width is 100cm then 1vw=1cm.
vh	Measured as a percentage value of the viewport’s height. If the viewport height is 100cm then 1vh=1cm.
vmin	Percentage value of smaller viewport dimension. It is supported as “vm” in Internet Explorer 9 and above versions.
vmax	Percentage value of larger viewport dimension. This is not supported by IE.
ch	Measured relative to width of zero (0).

“vmin” and “vmax” are not supported by Internet Explorer. The non-standard unit “vm” is supported by IE 9 or later. It calculates the relative value by considering the minimum of the viewport’s height or width.

Absolute Length Units

in	Absolute value in inches. 1 inch = 2.54 centimeters.
cm	Centimeters
mm	Millimeters
pt	Points (1 point = 1/72 inches)
pc	Picas (1 pica = 12 points)

Angle Units

deg	Degree
grad	Gradians
rad	Radians
turn	Turns

Time Units

ms	Milliseconds
s	Seconds

Examples

Below are some of the examples, how different CSS length units impact the display of the text content. Basically we have shown relative and absolute values as angle/time units are not applicable for text content.

This is the font with size 2em. The font-size of the element is 18px and hence this line is relatively calculated as 36px (2x18).

This is the font with size 20px and red color.

This is the font with size 36px and blue color. This is equivalent to 2em in size as the element font-size is 18px.

This is the font with size 18px and green color. The width is restricted to 50% of the total width of the element. We add more content to show you the width is restricted compared to previous sentences.

This line is created with font-size=2ex value.

This line is created with font-size=2rem value which is 2 times that of the root element's pixel value 36px (2x18).

This line is created with font-size=15vh value, resize the browser's height to see how this text changes.

This line is created with font-size=0.5cm absolute value.

This line is created with font-size=2pc absolute value.

Related: CSS box model tutorial for beginners.

Angle and Time Units

Angle and time units are not used with length values. But generally used with CSS transform and transition animation properties like below:

.image {
transform: rotate(10rad);
transition-duration: 2s;
}

Points to Remember When Using Length Units in CSS

Below are some of the important points to remember when using CSS units:

• Generally “em” and “rem” values are used to create good layouts.
• “em” is relative to the font-size attribute of the parent element. 2em indicates 2 times larger font-size of the current element.
• “px” is relative to the resolution of the viewing device.
• “%” is relative to another length unit value.
• All CSS length units are supported by all major browsers like Chrome, Firefox, IE, Safari and Opera.
• Values calculated with “em” is relative to the parent element, hence it is to be used carefully when nesting multiple elements to avoid unexpected results. The easy way is to use “rem” which is based on the root element size.
• All CSS units are measured without any space between the value and the unit.
• A length value of zero (0) does not require the identifier. For example, “margin=0;” is the correct way to define and not “margin=0px;”.

Related: How to create fullwidth parallax page with CSS?