Understanding Units In CSS
There are plenty of units in CSS. From
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.
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 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 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 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
2rem is equal to 2 times
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.
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.
The percentage unit is fairly self-explanatory. It is relative to the parent element. For example, if the width of the
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.
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:
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.
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 (
%, 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:
LinkedIn: Blake Yeboah
Twitter: Blake Yeboah
You can also show your support by buying me a coffee 😃