Name: Most Common CSS Units Of Measure Explained
Rating: 4.5 (5568 reviews)
Author: flippedcoding

When you look through CSS and you start seeing the different units of measure, it's helpful to know exactly what they do. To help you better understand how the CSS units of measure work, here are some explanations and examples of how the most commonly used ones work.

px

Pixels (px) are the most commonly used unit of measure because there are many standards in web design based around the pixel. Just for your own knowledge, a px maps to one pixel on your screen. It's super small, but the point of having this reference is to know exactly how much physical space an element or text will fill.

When you are using pixels, keep in mind that these units change relative to the size of the screen. 12px is going to look a little different depending on whether it's on a phone or a laptop . Pixels form the base measurement of websites. The default root size of a web page is set to 16px by all of the popular browsers.

div {
    height: 32px;
}

%

Percentages get a lot of use in responsive design and are pretty straightforward. The one thing you have to remember is that the size is relative to the parent element. If you have a <h2> nested in a <div> and you give it a width using the % unit of measure, then the <h2> width will be relative to the size of the <div>. It'll look something like this:

div {
    width: 1250px;
}

h2 {
    width: 35%;
}

Now you know that the width of the <h2> will be 35% of the <div> width. Percentages are more simple than the em and rem units, but percentages aren't typically used for properties like font-size or border so there are more limited uses of it.

em

This is relative to the font-size value of the element. So say you have a <p> inside of a <div> and these are the styles you have:

div {
    font-size: 3em;
}

p {
    width: 2em;
}

The <div> will have a font size of 3 times the font-size of the <body>. So that will give it a default of 48px. That number comes from the default font size on browsers which is 16px like we discussed earlier. With the <div> being 3 times that, you get the 48px.

That means your <p> is going to have a width that is 2 times bigger than the font-size of the <div>. So your <p> would have a width of 96px.
That's how the em unit of measure works. Remember that the font-size value of the containing element determines the size of a child element using em.

rem

This unit of measure is really similar to the em unit of measure except it is easier to understand. The rem unit of measure is based off of the font-size of the root element. Unless you change the <body> font-size, this base size will be 16px.

That means everything that has the rem unit behind it is just a multiple of 16px. So for example, let's say you have a sidebar and a main container on your page. Here's your CSS:

.sidebar {
    width: 2.4rem;
}

.main-container {
    width: 7.2rem;
}

Since you used rem, you should be able to easily calculate how big your elements will be. This is a big advantage over em because you don't have to keep up with the font-size of every element and it still does a little scaling when the page is looked at on different devices.

I hope that this quick explanation helped you understand the common CSS units of measure better!

These are just the most commonly used CSS units of measure, not the only ones. There are at least 11 others. The problem with some of the others are their limited browser support.

Two of the other units of measure that are gaining some popularity are the viewport measures. The viewport height and viewport width, vh and vw, make it even easier to make responsive layouts because they are both relative to the size of the screen. But that's a discussion for another day.

Hey! You should follow me on Twitter because reasons: https://twitter.com/FlippedCoding