Introduction

There are plenty of units in CSS. From px to vh, there is an abundance of units all with their distinctive use cases. Considering the amount of options, its perfectly reasonably to be confused as to which unit you should use and where. This article aims to simplify CSS units and explain what each unit is and in what situations you may consider using it.

Units

In case you're unaware or unsure, a unit in CSS (like in maths) is essentially a type of measurement. When adding margins, or adjusting font size, the value you enter is a quantity of units (e.g 6px) which the browser understands and is able to appropriate display the content.

Before mentioning specific units, I'd like to talk about absolute and relative units and the different between them.

Absolute vs Relative

The two types of length units are absolute and relative. Absolute units are fixed, meaning no matter the screen size or any other factor, the element will always appear to that exact size. For example, pixels (px) is an absolute length unit since 50px will be 50px no matter the width of the screen. Relative units specify lengths relative to another length property. For example, vw is a relative unit that represents 1% of the viewport's width. This means if you set a div's width to 50vw, on both large desktop screens and mobile screens it will take up 50 percent of the viewport's width which isn't equivalent between a mobile and desktop device (desktop is larger, obviously).

Now, lets talk about a few different units and where you would probably want to use them.

Pixels (px)

Pixels is one of the most commonly used units. Its probably the unit you first saw when learning CSS. Pixels have a variety of use cases, including:

• Font Sizes
• Widths & Heights
• Margins & Padding

Pixels are great, however if you want your website to better adapt to different screen sizes (be responsive) a relative unit would probably work better. Pixels can still work in a lot of situations though like adding a margin between elements in a list. It heavily depends on the exact circumstance, however a good rule of thumb is if the space needs to constantly change (like get reduced) based on the screen size (width or height) there is probably a more suitable relative unit.

Inches (in)

Inches are another absolute unit. An inch is equal to 96 pixels. To be entirely honest, I have never actually used this unit, however if your web page is specifically built to be printed, they can be helpful to control spacing between elements.

em & rem units

Em and Rem units are very powerful relative length units that I use and see all the time. An em unit is relative to the font-size of the element. For instance, 3em is equal to 3 times the size of the current font. This is a great element to be used for margins and padding that will decrease as the size of the element decreases. This also helps you reduce the amount of media queries you will need to write to your website responsive :)

On the other hand, rem units are relative to the font-size of the root element. This means if your html element has a font-size of 24px, 2rem is equal to 2 times 24px meaning 48px. rem units are great for setting font-size of paragraphs and headings throughout your document since you can reduce all text sizes by simply changing the root element's font-size.

em and rem units are two of the most helpful units I've learned in my CSS journey and I'd highly recommend using them. They are very practical for creating scalable and responsive layouts. I'd recommend em units for margins and padding, as well as rem units for font-sizes.

Percentage (%)

The percentage unit is fairly self-explanatory. It is relative to the parent element. For example, if the width of the body is 500px, a div with the width of 50% which be half of that meaning 250px. Percentage units are also very useful since they can be used to scale layouts appropriately as the size of the screen varies.

Percentage units should be used for widths and heights of paragraphs, or divs where you control the width of the parent element.

vw and vh units

vw and vh units are more relative length units that are very helpful when creating scalable, responsive web pages. A vw unit is equivalent to 1% of the width of the viewport and a vh unit is equivalent to 1% of the height of the viewport. This means that you can set deeply nested elements to take up half the screen no matter the size of the screen.

I often use vw units when I want the content to shrink as the width of the page shrinks. The same applies to vh units just based on the height. You can use these units for:

• Margins
• Padding
• Widths
• Heights

You can even set a font-size to these units for them to consistently shrink with the page however, I'd recommend using rem units for font-size.

Take Away

We've covered many units that are available in CSS. I've provided my personal recommendations for when and where you should use each unit as well as provided a general overview of what the unit represents. One key takeaway from this article is that relative units (vw, %, etc) should be used more often than absolute units to create responsive websites that scale appropriately.

👌 Thanks for reading this article!

If you like what I do and would love to see more related content, follow me on my other social platforms:

GitHub: Blake-K-Yeboah

LinkedIn: Blake Yeboah

Twitter: Blake Yeboah

You can also show your support by buying me a coffee 😃