CSS Units: Which Ones To Use And Avoid
An explanation on CSS units with examples to get you going
Since there are so many different units in CSS, it can be quite overwhelming. Most developers know how to work with pixels and percentages, but there are many more CSS units that can be used. Some of the CSS units that we will handle in this article are em, rem, fr, ch, vw and vh. You will learn which CSS units you should be using and why you should be using them. And you will also learn why you should not use certain units.
The units
Let’s start by going over each unit and explain where it’s specifically good for.
Pixels
Pixels are the basic building block for everything in CSS. Strangely enough, pixels shouldn’t be the unit of choice most of the time. Pixels are very straightforward, they say what they are going to do.
Take a look at the example below. This will render a 500px block with a red background that has a 14px font-size paragraph in it. If you wanted to make the div a little smaller, all you have to do is change the width to 250px, for example. You want the font-size a little bigger? No problem, just change the font-size to 16px.
<div>
<p>This is some text..</p>
</div>
