CSS Units – A simple look at px, em, etc.

A depiction of CSS Units and Types

On this Page

Page Sections

Page Sections

To understand what CSS Units are, a good grip on what a Unit means is paramount.

What is a Unit?

A unit is anything accepted as a gauge for expressing the quantity or size of another thing. 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. Meanwhile, the number ‘two’ is just the unit’s quantity: used to depict my laptop’s width accurately.

So, what are CSS Units?

Since anything can be a unit of measurement, CSS is programmed to work with selected few. Hence, CSS Units are the specific units permitted for use in CSS, to express a CSS property’s size.

For example, in the CSS code below, a div element’s width property is set to 300px, where px is the unit, and 300 is the quantity of px (pixels).

div {
  width: 300px;
}

Hence, pixel (px) is one of a few other units that can be used in CSS to express a CSS property’s size.

Generally, though, there are two types of CSS units: Absolute and Relative Length Units.

Absolute Length Units

Absolute length units are fixed units. Therefore, the size of things expressed in any of the Absolute length units will never change — regardless of the medium used to display them.

Hence, due to their fixed nature, absolute length units work best with print outputs: as print outputs are of static sizes.

Examples of Absolute Length CSS Units

UnitNameEquivalence
cmCentimeters1cm = 96px/2.54 = 37.795px
mmMillimeters1mm = 1/10th of 1cm
QQuarter millimeters1Q = 1/40th of 1cm
inInches1in = 96px = 2.54cm
pcPicas1pc = 1/16th of 1in = 12pt
ptPoints1pt = 1/72 of 1in
px*Pixels1px = 1/96th of 1in

Note:

If you wish to create an inclusive app, it is best to avoid Absolute Length Units as they are not accessible. For instance, using Absolute Length Units will make it impossible for users to change the font sizes chosen by a programmer. Thus, a limited vision user could find the software difficult to use.

* Contradictory, Pixels (px) is an absolute length unit commonly used in programming. Luckily though, W3C’s Units of Length article does a good job explaining why pixel (px) is an acceptable unit to use for screen outputs.

Relative Length Units

Relative length units are dynamic units. These lengths are always relative to (or dependent on) another length.

Hence, relative length units are the recommended unit for rendering mediums, such as computer screens, due to their adaptive nature.

Examples of Relative Length CSS Units

UnitDescription
emScales an element relative to the font size of the element’s parent.
For instance, 2em means ‘two’ times the current size of my parent element’s font size.

Note: em = element
remScales an element relative to the font-size of the root <html> element.
For instance, 3rem means ‘three’ times the current size of the root <html> element’s font-size.

Note: rem = root element
%Scales an element relative to the size of the element’s parent.
For instance, a font size set to 2% means: adjust my font size to ‘two’ percent the current font size of my parent element.

Likewise, an image’s width set to 50% means: adjust my width to ‘fifty’ percent the current width of my parent element.

Note: % = percentage
frScales an element relative to the fraction of available space in a grid container. Meanwhile, note that the fr unit mainly works with CSS Grid Layouts.

For instance, grid-template-columns: 1fr 2fr 1fr; means divide the grid into three columns, where the first column is one (1) fraction of the whole grid’s free space. While, the second column is two (2) fraction of the available space, and the third column is one (1) fraction.

By the way, Grid by Example: the fr unit is an insightful short video illustration of the fr unit.

Note also: fr = fraction
exScales an element relative to the element’s parent’s x-height. However, beware that ex is a rarely used unit!

Also note, ex = element’s x, where x is the lower-case letter x of the parent element.
chScales an element relative to the width of the element’s font’s character zero (0).

Note that, ch = character.
vwScales an element relative to 1% of the viewport/browser’s width.

For instance, if the size of a viewport is 35cm wide, then 1vw = 0.35cm; that is, 1% of 35cm.

Note: vw = viewport’s width
vhScales an element relative to 1% of the viewport/browser’s height.

For instance, if the size of a viewport is 19cm high, then 1vh = 0.19cm; that is, 1% of 19cm.

Note: vh = viewport’s height
vminScales an element relative to the minimum dimension between vw and vh.

Note: vmin = viewport’s minimum
vmaxScales an element relative to the maximum dimension between vw and vh.

Note: vmax = viewport’s maximum

em vs. rem

The difference between the em unit and the rem unit is that em is relative to the element’s parent’s font size. In contrast, rem is relative to the root element’s font-size.

For instance,
let the root element <html> have a font size of 16px, also,
let <h3> be a parent element having a font size of 30px,
and, let <a> be the child element of <h3>.

Therefore, if we specify <a> element’s value to be 2em, then the element’s size will be 2 multiplied by 30px (the font size of <a>‘s parent element: <h3>) = 60px.

However, if we specify <a> element’s value to be 2rem, then the element’s size will be 2 multiplied by 16px (the font size of the root element: <html>) = 32px.

em vs. %

The difference between the em unit and the % unit is that em scales an element by multiplying the element’s parent’s size by a number. In contrast, the percentage (%) unit scales an element by multiplying the element’s parent’s size by a percentage.

For instance,
let <h3> be a parent element having a font size of 30px,
and let <a> be the child element of <h3>.

Therefore, if we specify <a> element’s value to be 20em, then <a>’s size will be 20 multiplied by 30px (the font-size of <a>’s parent: <h3>) = 600px.

However, if we specify <a> element’s unit to be 20%, then <a>’s size will be 20/100 multiplied by 30px (the font-size of <a>’s parent: <h3>) = 6px.

In Summary

CSS does not support all units. Hence, the term “CSS Unit” refers to the units permitted by CSS for expressing the sizes of CSS properties.

Last Updated on August 11, 2020 by Oluwatobi Sofela

Share on facebook
Facebook
Share on twitter
Twitter
Share on pinterest
Pinterest
Share on linkedin
LinkedIn
Share on facebook
Facebook
Share on twitter
Twitter
Share on whatsapp
WhatsApp
Share on pinterest
Pinterest
Share on linkedin
LinkedIn