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
Top comments (15)
How can pixels have a constant relation to inches?
A pixel at 1080p on my 17" laptop is surely much smaller (physically) than a pixel at 1080p on my 50" tv?
px aren't pixels.
They are more like an "average pixel" that browsers should scale to real pixels.
This way they are much similar to actual pixels in which developers are accustomed to think in while mantaining their average real size across devices.
I read a bit more about this, and it seems that a Joan is correct. A "CSS pixel" is different from a hardware pixel.
"A CSS pixel, on the other hand, is designed to be roughly equivalent across devices. If you load the same website on side-by-side devices with a similar physical dimensions, but different pixel ratios, the website will appear to be roughly the same visual size."
A good read: juiceboxinteractive.com/blog/a-pix...
I was immediately confused as well. I guess, the author got that one pretty wrong.
Sorry for the confusion guys. I was thinking pt and typing px. D'oh! But I've corrected it above.
Just for clarity, px maps to a pixel on your screen. Pt are the units that are 1/72 of an inch.
I usually explain px by saying to think of it as "1/72" of an inch. Prior to "retina" and other pixel dense screens, it was simply one pixel on the screen. However it doesn't really mean that anymore.
I still encounter people who were told never to use px. However, if you use the "computed" panel in the web inspector, you can see that, ultimately, all units of measurement get converted to pixels anyway. That doesn't mean that other units don't have their advantages, but I do tend to use pixels most of the time. With a few exceptions.
Thanks Milecia for the post.
I always get confused between
rem&emand the post made it clearer for me.When do you use a specific measure over the others? Thanks!
A lot of it comes down to preference, but usually percentages are used for block level elements like <div>.
If you need something that's a fixed size you'd probably go with px.
The others are just a toss up.
I guess vh and vw measures will be more helpful because it adjust based on screen size. But yes, each measure have it's own importance.
Thanks for the explanation. It was simply put and understandable.
Informative. Glad to know. Thanks
Thanks for the short explanation! I'm getting into CSS and this really comes in handy.
I'm glad it was helpful!
Thank you! You helped me a lot!