What are the Most Common CSS Units?

What are the Most Common CSS Units?


When defining the size of certain CSS properties, CSS provides multiple alternatives for which units to use. Learning all of your CSS unit options can be critical for styling in a way that is easy to manage and looks beautiful on every device.

What is a CSS Unit?

A CSS unit is used to establish the size of a property that we specify for an element or its content. CSS units are necessary to define measurements such as margin: 20px, where px (or pixel) is the CSS unit. They are used to specify margins, padding, and lengths, among other things.


p {
  margin: 20px;

In this case, margin is the property, 20px; is the value, and px (or “pixel”) is the CSS unit.

CSS has two main types of units: absolute and relative length units.

Absolute Units

The absolute length units are fixed, and a length expressed in any of these will be displayed as that size.

Because screen sizes vary so greatly, absolute length units are not recommended for use on screen. They can, however, be used if the output medium is known, like in print layout.

Because absolute units do not scale when the screen size changes, they are less suitable for responsive sites.

The following are all absolute length units

UnitNameEquivalent to
cmCentimeters1cm = 37.8px = 25.2/64in
mmMillimeters1mm = 1/10th of 1cm
qQuarter-millimeters1Q = 1/40th of 1cm
inInches1in = 2.54cm = 96px
pcPicas1pc = 1/6th of 1in
ptPoints1pt = 1/72nd of 1in
pxPixels1px = 1/96th of 1in

Here is an example of an absolute unit – px

h1 {
  font-size: 60px;

p {
  font-size: 25px;
  line-height: 50px;

px – stand for Pixels. This is mostly designed for CSS and it is one of the most used absolute length.

Relative Units

Relative length units define a length in comparison to another length property. Relative length units scale well across various rendering mediums.
The benefit of using relative units is that with some careful planning you can make it so the size of text or other elements scales relative to everything else on the page.

The following are all relative length units

emRelative to the font-size of the element (2em means 2 times the size of the current font)
exRelative to the x-height of the current font (rarely used)
chRelative to the width of the “0” (zero)
remRelative to font-size of the root element
vwRelative to 1% of the width of the viewport*
vhRelative to 1% of the height of the viewport*
vminRelative to 1% of viewport’s* smaller dimension
vmaxRelative to 1% of viewport’s* larger dimension
%Relative to the parent element

Here is an example of a relative length unit – rem

html {
    font-size: 10px;
p {
    font-size: 1.4rem; // This would be 14px (1.4 * 10px)
h1 {
    font-size: 2.2rem; // 22px

In CSS rem stands for “root em”, a unit of measurement that represents the font size of the root element. This means that 1rem equals the font size of the html element, which for most browsers has a default value of 16px. Using rem can help ensure consistency of font size and spacing throughout your UI.


A CSS unit is the unit of measurement used in CSS to express the size of a property on an element.

Absolute and relative length units are both acceptable. If you care about accessibility, though, relative length units should be your first choice.

Further reading

Do you want to know more about CSS? Then go here to read more articles.

For a more in-depth look at CSS values and units go over to MDN Web Docs- CSS values and units

Share this article. Follow me on Twitter for more updates.

Pin It on Pinterest