Absolute and Relative Units in CSS

In this lesson, we are going to summarize all the units that are available in CSS. You are probably already familiar with some of them.

First of all, there are absolute units:

There are also relative units, whose values are relative to some other elements.

em: Relative to the font size of the parent element. If not set, the default font size will be 16px. 2em is two times the current font size, which is 32px.
ex: Relative to the x-height of the current font. This is rarely used.
ch: Relative to the width of the character 0. The value may be different for different fonts.
rem: Relative to the font size of the root element, <html>. This provides a consistent base size across the entire document, and as a result, this is the most commonly used unit for fonts.
vw: Relative to 1% of the width of the viewport. Viewport is the visible area of the webpage, such as the browser window.
vh: Relative to 1% of the height of the viewport.
vmin: Relative to 1% of the smaller dimension (width or height) of the viewport. This ensures the element is at least visible on the screen.
vmax: Relative to 1% of the larger dimension (width or height) of the viewport.
%: Relative to the parent element.