Skip to Content
JavaScriptCSSHTMLPHPReactVueNodeJSMySQLWordPress

CSS Units Explained: Relative & Absolute Units

CSS iconCSS

CSS offers several options for unit measurement when determining the sizing of your elements in your applications. This article will cover all of them in detail as well as best practices for their use and perfect scenarios to use them in.

What is a CSS Unit?

A CSS unit is a method of measurement used to determine the size of an element or its contents in an HTML document.

For example, if you have a div element that you would like to add padding to, you could do so using px, or pixel, units:

div {
	padding: 20px;
}

There are two types of units that we'll explore in this tutorial, relative and absolute. Let's go over each and how they can be applied to your applications.

Absolute Units

Absolute units in CSS are fixed lengths of measurement, meaning they'll always appear in the exact same size no matter where the associated elements are contained.

Here is a full list of absolute units you can use in your CSS code:

  • px: Pixels, equal to 1/96 of an inch, and relative to the associated device. This is the most widely used unit of choice and can be used in almost every scenario.
  • pt: Points, equal to 1/72 of of an inch.
  • pc: Picas, equal to 12 points.
  • in: Inches, equal to 2.54 centimeters.
  • cm: Centimeters
  • mm: Millimeters

Relative Units

Relative units in CSS are lengths associated with another property's size. Take the size of a div element that spans 50% of the width of your screen, for example. Any child elements within that div element set to 100% width will still only span halfway across the screen. This is because the width of those child elements is determined by their parent element, the div in this case.

Here is a full list of relative units you can use in your CSS code:

  • em: Relative to the font size of the element. For example, 2em is defined as 2 times the size of the current font size. Great for determining font sizes or font line spacing. Using em units throughout your elements, you can create a perfectly scalable layout.
  • rem: Relative to the font size of the root element. For example, if you're setting rem units in a child container where its parent is set to a 12pt font size, the font size of the child element will also be 12pt if set to 1rem, or twice the size if set to 2rem.
  • ex: Relative to the x-height of the current font size, or half of 1em. This is rarely used, but good to know for reference.
  • ch: Relative to the height of the "0" (zero) glpyh for the selected font family.
  • vw: Relative to the viewport width, or the browser's window width. 1vw is 1% of the width of the viewport.
  • vh: Relative to the viewport height, or the browser's window height. 1vh is 1% of the height of the viewport.
  • vmin: Relative to the viewport's width or height, whichever is smaller.
  • vmax: Relative to the viewport's width or height, whichever is larger.
  • %: Percent sizing relative to the parent element.

Browser Support

Browser support for each of the units described above shouldn't be a concern for the major browsers. Here's a full list, broken down by each unit type, that you can reference:

Browser Support

Conclusion

Each of the relative and absolute units listed above can be used in many ways. Play around with them on your own projects to further understand how they work. If you have any additional information on CSS units, leave a comment below.

Created: December 27, 2021