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

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

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.

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