CSS units - which one should be used and when

CSS units are a fundamental aspect of HTML element styling. They allow us to specify the size, positioning, and various other properties of an element. Every developer is faced with a variety of unit options: pixel-based units (px), font-based measurements such as em or rem, viewport percentages (vh or vw), and even less common choices like ex or ch. Making the right choice can have a significant impact on a site's responsiveness, accessibility, and overall design efficiency.
In this article, we'll take a look at these units and give you my short guidance on when to use them.

Absolute units in CSS

Absolute CSS units provide fixed precise measurements. Their value does not change relative to other elements or viewport dimensions. Commonly used absolute units include. Pixel - the smallest unit of a graphic display, a pixel represents a single point on the screen. Example of use:

.element { 
  width: 100px;
}

Other less commonly used absolute units include centimeters (cm), millimeters (mm), inches (in), points (pt) and picas (pc).

Relative units in CSS

Relative units offer flexibility and responsiveness in design, with values that depend on other factors such as the size of the parent element, the size of the root element, or the viewport.

Em
This unit is relative to the font size of the nearest parent element. If the parent has a font size of 16px, 1em would be 16px. Example of use:

.parent { 
  font-size: 10px; 
} 
.child { 
  width: 2em; /* equals 20px, because 1em = 10px */
  padding: 1em; /* equals 10px */
}

Rem
Short for "root em", this unit is relative to the font size of the root element. So if the root element has a font size of 10px, 1rem is equal to 10px. Example:

html { 
  font-size: 20px; 
} 
.element { 
  width: 2rem; /* equals 40px */
} 

Viewport based units

Now let's jump into viewport units which are very helpful for the mobile world.

Viewport Height
One unit is equal to 1% of the viewport height. So 100vh represents the full height of the screen. Example:

.fullscreen-height { 
  height: 100vh; /* the entire screen height */
}

Viewport Width
Similar to vh, but for the width. So 1vw is 1% of the width of the viewport and 100vw is the full width of the screen. Example of use:

.fullscreen-width { 
  width: 100vw; /* the entire screen width */
}

Percentages
Percentages while not strictly a unit, are another way to add responsiveness to your layout. They are relative to the size of the parent element. Example of use:

.parent { 
  width: 80%; 
}
.child { 
  width: 50%; /* half width of the parent */
}

My guide on which to use when

• Pixels (px): Choose pixel units when you need precise control over the layout, such as defining borders, margins, or padding.
• Relative units (em, rem, %): Choose these units to ensure your design can scale and respond to changes in font size or screen dimensions.
• Viewport units (vh, vw): These units are perfect for elements that need to take up a certain percentage of the viewport. Ideal for creating full-screen sections or headers.

Conclusion

Understanding the different CSS units and their uses is essential for creating effective and responsive web designs. Pixels tend to offer a degree of precision and control, while relative units such as 'em', 'rem' and percentages offer greater flexibility and responsiveness. In addition, viewport units are useful for full-screen layouts and to ensure that designs fit different screen sizes.
It's important to remember that there's no one-size-fits-all approach, and the trick is to choose the right unit to achieve the desired effect for a particular element or design aspect.

If you need more description, you can look at the documentation here (source of that article)

Happy css-sizing!