Introduction

CSS has many units to define the length property of an element. The length property can be width, margin, padding, font-size, width, and many more. These properties require value in a format of quantity followed by the CSS unit. There are two types of lengths used in CSS — relative and absolute.

Syntax Example

width: 12px;

While writing the syntax there are a few things to keep in mind:

1. There should not be any space between quantity and CSS unit.

   padding: 40 px; // wrong
   padding: 40px; //correct
   

2. If the quantity is zero, the CSS unit can be omitted.

   margin: 0px;
   padding: 0; //both are correct
   

3. Some length properties accept negative quantities too.

   margin: -200px;
   

Absolute length units

Absolute length units are fixed CSS units. These units always remain the same as they are not related to anything. For example, A centimeter will always remain a centimeter. 1 centimeter is always gonna be 0.01 meter because it's absolute. And due to their robustness, they are not very useful for creating a responsive layout.

Since there is a wide range of screen sizes, absolute length units are not advised for usage on screens. However, they can be well used in output mediums like the print layout.

CSS Unit	CSS Unit Name	Equivalent to	Example
cm	centimeter	1cm = 37.8px = 25.2/64in	font-size: 0.6cm;
in	inches	1in = 2.54cm = 96px	font-size: 0.2in;
mm	millimeter	1mm = 1/10th of 1cm	font-size: 6mm;
pc	picas	1pc = 1/6th of 1in	font-size: 1.2pc;
px	pixels	1px = 1/96th of 1in	font-size: 12px;
pt	points	1pt = 1/72nd of 1in	font-size: 12pt;
Q	Quarter-millimeters	1Q = 1/40th of 1cm	font-size: 4Q;

Pixels px are the most popular absolute unit for screens. It's a measurement unit created specifically for CSS, and its actual value depends on the "density" of the screen or printer also known as PPI (Pixels Per Inch), or DPI (Dots Per Inch) respectively. It's kind of relative in this sense. Pixels will look exactly the same regardless of any screen resolution.

For example:

p { font-size: 16px; }

16px font-size will look the same on smart-phone and on laptops.

All Absolute units except pixels might vary a little on low-resolution screens(less than 200dpi).

Relative length units

Relative length units are related to another length property. It can be font-size of the parent element or the size of the viewport. These units scale nicely across various rendering mediums, so they are perfect for responsive layout.

CSS Unit	Relative to	Example
em	Relative to the current font-size of the element (3em means 3 times the size of the current font)	line-height: 3em;
ex	x-height of the element's font. The x-height is determined by the height of the font's lowercase letter x.	font-size:1ex;
ch	Relative to the width of character "0"(zero) of the element's font.	font-size:3ch;
rem	Font size of the root element.	font-size:1rem;
lh	Line height of the element.	font-size:1lh;
rlh	Line height of the root element. When used on the font-size or line-height properties of the root element, it refers to the properties' initial value.	font-size:rlh;
vw	1% of the viewport's width.	font-size:2vw;
vh	1% of the viewport's height.	font-size:2vh;
vmin	1% of the viewport's smaller dimension.	font-size:4vmin;
vmax	1% of the viewport's larger dimension.	font-size:3vmax;
vb	1% of the size of the initial containing block in the direction of the root element's block axis.	font-size:1vb;
vi	1% of the size of the initial containing block in the direction of the root element's inline axis.	font-size:1vi;
svw, svh	1% of the small viewport's width and height, respectively.	font-size:1svw; font-size:1svh;
lvw, lvh	1% of the large viewport's width and height, respectively.	font-size:1lvw; font-size:1lvh;
dvw, dvh	1% of the dynamic viewport's width and height, respectively.	font-size:1dvw; font-size:1dvh;
%	Relative to the parent element	width:20%;
fr	fr are fraction units. They are used in CSS Grid to divide space into fractions.	grid-template-columns: 1fr 1fr;

Example

• em : You want the font of a child element to be half the size of its parent’s font-size (e.g. the paragraph under a div).

<style>
div {
  font-size: 40px;
}

span {
  font-size: 0.5em;
}
</style>

<div>The font-size of the div element is set to 40px. 
<span>The span element inside the div element has a font-size of 0.5em, 
which equals to 0.5 x 40 = 20px</span>.</div>

• rem : You want the font-size of the span element to be same as HTML document and shouldn't inherit from the parent.

<style>
html {
  font-size:16px;
}

div {
  font-size: 40px;
}

span {
  font-size: 1rem;
}
</style>

<div>The font-size of the div element is set to 40px. 
<span>The span element inside the div element has a font-size of 1rem, 
which equals to 1 x font-size of document = 1 x 16px =  16px</span>.</div>

• ex : You won't come across ex very often, but it's a good indicator of a font's midsection. Let’s say you want a font’s size to be double the height of the font’s character “x”.

<style>
div {
  font-size: 40px;
}

span {
  font-size: 1ex;
}

</style>

<div>The font-size of the div element is set to 40px. 
<span>The span element inside the div element has a font-size of 1ex, 
which equals to 1 x height of character "x"</span>.</div>

• ch : You want a font’s size to be three times the width of the font’s character “0”.

<style>
div {
  font-size: 40px;
}

span {
  font-size: 3ch;
}
</style>

<div>The font-size of the div element is set to 40px. 
<span>The span element inside the div element has a font-size of 3ch, 
which equals to 3 x width of character "0"</span>.</div>

% - You want a child element to have 25% of the parent’s width as a margin so it never fills the whole parent element. If the parent’s size changes, the margin will update too.

<style>
div {
  width: 500px;
}

span {
  margin: 25%;
}
</style>

<div>The width of the div element is set to 500px. 
<span>The span element inside the div element has a margin of 25%, 
which equals to (25/100) x width of div = 0.25 x 500px = 125px</span>.</div>

vh - You want your div to have 50% height of viewport/window.

<style>
div {
  height: 50vh;
}
</style>

<div>The height of the div element is set to 50vh. 
If the viewport has the height of 300px, the height of this 
div will become 50% of 300 = 300 x 0.5 = 150px. 
As the viewport changes, the height of this div changes. </div>

vw - You want your div to have 50% width of viewport/window.

<style>
div {
  width: 50vw;
}
</style>

<div>The width of the div element is set to 50vw. 
If the viewport has the width of 300px, the width of this 
div will become 300 x 0.5 = 150px. 
As the viewport changes, the width of this div changes. </div>

vmin - You want your pre element to have font-size related to the smallest dimension possible.

<style>
pre {
  font-size: 5vmin;
}
</style>

<pre>The font-size of the div element is set to 5vmin. 
If the viewport has the dimension of 390 x 355,
vw =  (390/100) x 5 = 19.5px and 
vh = (355/100) x 5 = 17.75px. 
As we can see vh is smaller than vw, therefore, 
font-size of div will be 17.75px.
vmin will be vw or vh, whichever is smaller.</pre>

vmax - You want your pre element to have font-size related to the largest dimension possible.

<style>
pre {
  font-size: 4vmax;
}
</style>

<pre>The font-size of the div element is set to 4vmax. 
If the viewport has the dimension of 390 x 355,
vw =  (390/100) x 4 = 15.6px and 
vh = (355/100) x 4 = 14.2px. 
As we can see vw is larger than vh, therefore, 
font-size of div will be 15.6px.
vmax will be vw or vh, whichever is larger.</pre>

Best unit for specific cases

px - for defining length properties for a small quantity of property. For example: When we are defining small border width.

border: 1px solid black;

fr - grid division. Makes columns of grid responsive and best for all screens. For example: The code below will create 3 columns that will take equal space and adjust according to the screen.

grid-template-column: 1fr 1fr 1fr;

vh - to make an element take 100% of the height. For example: We want a vertical navbar to take 100% height of the viewport.

height: 100vh;

% - we can use 100% width when we want the element to take 100% space of parent container.

width: 100%;

ch - You have a mono-spaced font (the characters are always the same width) like Courier and you only have space for 12 characters.

width: 12ch;

vmax - You don't mind if an image is cut off because you want it to fill the entire viewport's larger dimension. For example, if an image of a pattern is used as a background.

width: 100vmax;

Conclusion

Overall, when and how you select CSS units will be determined by two questions:

• Do I want my website or app to be responsive?
• If I want it responsive, what should content scale to in the app?

Once you've answered these questions, it'll be much easier to decide which unit to use.

Resources

• W3schools
• Mdn
• DigitalOcean
• medium
• areknawo
• Tutorial Brain
• tutorials point
• flaviocopes
• freeCodeCamp