CSS Unit – Explained with Examples

A CSS unit is the standard of measurement used in CSS to express the size of a specific element’s property.

For instance, in the snippet below, a div element’s width property is set to 300px, where pxis the unit, and 300 is the quantity of pxs (pixels).

div {
  width: 300px;
}

What Is a Unit?

A unit is anything accepted as a gauge for expressing the quantity or size of another thing.

So, for instance, to describe my laptop’s width, I could say, “my laptop is two A5-papers wide.”

In such a case, A5-papers is the unit used to express my laptop’s width. And the number “two” is the unit’s quantity used to depict my laptop’s width accurately.

Keep in mind that not all units are CSS units. While you can use anything as a unit of measurement, you have limited options in CSS, as CSS is programmed to work with a selected few.

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

What Are Absolute Length Units?

Absolute length units are fixed standards of measurement.

The size of things expressed in any of the absolute length units will never change, regardless of the medium used to display them. As such, they work best with print outputs.

Examples of absolute length CSS units

Below are examples of the absolute length units used in CSS.

Unit	Name	Equivalence
cm	Centimeters	1cm = 96px/2.54 = 37.795px
mm	Millimeters	1mm = 1/10th of 1cm
Q	Quarter millimeters	1Q = 1/40th of 1cm
in	Inches	1in = 96px = 2.54cm
pc	Picas	1pc = 1/16th of 1in = 12pt
pt	Points	1pt = 1/72 of 1in
px	Pixels	1px = 1/96th of 1in

If you wish to create an inclusive app, it is best to avoid absolute length units as they are not accessible.

For instance, absolute length units make it less intuitive for users to change an app’s font size. As such, a limited vision user could find such types of software challenging to use.

What Are Relative Length Units?

Relative length units are dynamic units.

The sizes of things expressed in any of the relative length units will always be dependent on another length. As such, they work best with rendering mediums, such as computer screens.

Examples of relative length CSS units

Below are examples of the relative length units used in CSS.

Element (em)

em scales an item relative to the font size of the element’s parent.

Example

2em means twice the current size of my parent element’s font size.

Root element (rem)

rem scales an item relative to the font size of the root <html> element.

Example

3rem means thrice the current font size of the root <html> element.

CodeSweetly ads

em vs. rem

The difference between the em unit and the rem unit is that em scales an item relative to the element’s parent’s font size.

However, rem scales an item relative to the root element’s font size.

Example

In the snippet below, <div>’s width is set to 10em. As such, the em unit will scale the <div>’s width to 400px (10 multiplied by 40px—the font size of <div>’s parent element (<body>)).

<html style="font-size:20px;">
  <body style="font-size:40px;">
    <div>I am a child of the body element.</div>
  </body>
</html>

div {
  width: 10em;
  border: 2px solid purple;
  background-color: thistle;
}

Try it on CodePen

However, in the snippet below, <div>’s width is set to 10rem. Therefore, the rem unit will scale the <div>’s width to 200px (10 multiplied by 20px—the font size of the root element (<html>)).

<html style="font-size:20px;">
  <body style="font-size:40px;">
    <div>I am a child of the body element.</div>
  </body>
</html>

div {
  width: 10rem;
  border: 2px solid purple;
  background-color: thistle;
}

Try it on CodePen

Percentage (%)

The percentage (%) unit scales an element relative to the size of the element’s parent.

Example 1

A font size set to 2% means “adjust my font size to two percent the current font size of my parent element.”

Example 2

An image’s width set to 50% means “adjust my width to fifty percent the current width of my parent element.”

em vs. %

The difference between em and the percentage unit is that em scales an item by multiplying the element’s parent’s font size by a number.

However, % scales an item by multiplying the element’s parent’s size by a percentage.

Example

In the snippet below, <div>’s width is set to 20em. As such, the em unit will scale the <div>’s width to 600px (20 multiplied by 30px—the font size of <div>’s parent (<main>)).

<html>
    <body>
        <main style="font-size:30px; width:400px;">
            <div>I am a child of the main element.</div>
        <main>
    </body>
</html>

div {
  width: 20em;
  border: 2px solid blue;
  background-color: lightsteelblue;
}

Try it on CodePen

However, in the snippet below, <div>’s width is set to 20%. Therefore, the percentage unit will scale the <div>’s width to 80px (20% multiplied by 400px—the width of <div>’s parent (<main>)).

<html>
    <body>
        <main style="font-size:30px; width:400px;">
            <div>I am a child of the main element.</div>
        <main>
    </body>
</html>

div {
  width: 20%;
  border: 2px solid blue;
  background-color: lightsteelblue;
}

Try it on CodePen

CodeSweetly ads

Fraction (fr)

fr scales an element relative to the fraction of available space in a grid container.

Example

grid-template-columns: 1fr 2fr 1fr; means divide the grid’s usable space into four (4) portions.

Assign one fraction (1fr) to the first column. Give two fractions (2fr) to the second column. And one fraction (1fr) of the space to the third column.

Element’s x (ex)

ex scales an element relative to the element’s parent’s x-height.

Character (ch)

ch scales an element relative to the width of the element’s font’s character zero (0).

Viewport’s width (vw)

vw scales an element relative to 1% of the viewport/browser’s width.

Example

If the size of a viewport is 35cm wide, 1vw will imply 0.35cm—that is, 1% of 35cm.

Viewport’s height (vh)

vh scales an element relative to 1% of the viewport/browser’s height.

Example

If the size of a viewport is 19cm high, 1vh will imply 0.19cm—that is, 1% of 19cm.

Viewport’s minimum (vmin)

The vmin unit scales an element relative to the minimum dimension between the viewport’s width and height.

Viewport’s maximum (vmax)

vmax scales an element relative to the maximum dimension between the viewport’s width and height.

Support CodeSweetly