What are the Most Common CSS Units?

What are the Most Common CSS Units?

Introduction

When defining the size of certain CSS properties, CSS provides multiple alternatives for which units to use. Learning all of your CSS unit options can be critical for styling in a way that is easy to manage and looks beautiful on every device.

What is a CSS Unit?

A CSS unit is used to establish the size of a property that we specify for an element or its content. CSS units are necessary to define measurements such as margin: 20px, where px (or pixel) is the CSS unit. They are used to specify margins, padding, and lengths, among other things.

Example:

p {
  margin: 20px;
}

In this case, margin is the property, 20px; is the value, and px (or “pixel”) is the CSS unit.

CSS has two main types of units: absolute and relative length units.

Absolute Units

The absolute length units are fixed, and a length expressed in any of these will be displayed as that size.

Because screen sizes vary so greatly, absolute length units are not recommended for use on screen. They can, however, be used if the output medium is known, like in print layout.

Because absolute units do not scale when the screen size changes, they are less suitable for responsive sites.

The following are all absolute length units

Unit	Name	Equivalent to
cm	Centimeters	1cm = 37.8px = 25.2/64in
mm	Millimeters	1mm = 1/10th of 1cm
q	Quarter-millimeters	1Q = 1/40th of 1cm
in	Inches	1in = 2.54cm = 96px
pc	Picas	1pc = 1/6th of 1in
pt	Points	1pt = 1/72nd of 1in
px	Pixels	1px = 1/96th of 1in

Here is an example of an absolute unit – px

h1 {
  font-size: 60px;
}

p {
  font-size: 25px;
  line-height: 50px;
}

px – stand for Pixels. This is mostly designed for CSS and it is one of the most used absolute length.

Relative Units

Relative length units define a length in comparison to another length property. Relative length units scale well across various rendering mediums.
The benefit of using relative units is that with some careful planning you can make it so the size of text or other elements scales relative to everything else on the page.

The following are all relative length units

Unit	Description
em	Relative to the font-size of the element (2em means 2 times the size of the current font)
ex	Relative to the x-height of the current font (rarely used)
ch	Relative to the width of the “0” (zero)
rem	Relative to font-size of the root element
vw	Relative to 1% of the width of the viewport*
vh	Relative to 1% of the height of the viewport*
vmin	Relative to 1% of viewport’s* smaller dimension
vmax	Relative to 1% of viewport’s* larger dimension
%	Relative to the parent element

Here is an example of a relative length unit – rem

html {
    font-size: 10px;
}
p {
    font-size: 1.4rem; // This would be 14px (1.4 * 10px)
}
h1 {
    font-size: 2.2rem; // 22px
}

In CSS rem stands for “root em”, a unit of measurement that represents the font size of the root element. This means that 1rem equals the font size of the html element, which for most browsers has a default value of 16px. Using rem can help ensure consistency of font size and spacing throughout your UI.

Conclusion

A CSS unit is the unit of measurement used in CSS to express the size of a property on an element.

Absolute and relative length units are both acceptable. If you care about accessibility, though, relative length units should be your first choice.

Further reading

Do you want to know more about CSS? Then go here to read more articles.

For a more in-depth look at CSS values and units go over to MDN Web Docs- CSS values and units

Share this article. Follow me on Twitter for more updates.