CSS Units Explained

CSS uses many different types of measurement units to use in the HTML document. The units are a requirement for CSS to measure the length. They are used to set margins, padding, etc.

There are two type of CSS units

1. Absolute length
2. Relative length

1. Absolute length

The absolute length units are fixed and a length expressed in any of these will appear as exactly that size. The absolute length sizes are not relative to anything else and are considered to always be the same size. Absolute length units are not recommended for use on-screen, because screen sizes vary so much.

Unit	Name	Equivalent to
cm	Centimeters	1cm = 25/64in
mm	Millimeters	1mm = 1/10cm
in	Inches	2.54cm
px*	Pixels	1px = 1/96 of 1in
pt	Points	1pt = 1/72 of 1in
pc	Picas	1pc = 12pt

---

2. Relative length

Relative length units specify a length relative to another length property. These units scale better between different rendering mediums. The em and rem units are practical in creating a perfect scalable layout. We can use the relative units as the default for the responsive units. It helps us to avoid update styles for different screen sizes.

Unit	Equivalent to
em	Relative to the font-size of the element
ex	Relative to the x-height of the current font
ch	Relative to the width of the “0”
rem	Relative to the font-size of the root element
vw	Relative to the 1% of the width of the viewport
vh	Relative to the 1`% of the height of the viewport
vmin	Relative to the 1% of viewport smaller dimension
vmax	Relative to the 1% of the viewport of larger dimension
*	Relative to the parent element

---

Share this post, if you have liked it & thanks for scrolling. CSS units are great if you use them wisely.