Everything You Need to Know About CSS Units
A complete guide to CSS units
There are currently 15 different CSS units that browsers support, and the majority of them are unknown by most. In this tutorial, you’ll be going to learn everything you need to know about CSS units. In order, we are going to take a look at the following:
- Pixels
- Points
- Centimeters
- Millimeters
- Inches
- Picas
- Percentages
- Font units
- Viewport dimensions
If you’re only interested in some of them, feel free to jump to the relevant section.
We can break down CSS units into two categories. A unit can be either an absolute length or a relative length. Let’s see what is the difference between them. First, we are going to take a look at what type of units are absolute length units, as they are easier to understand how they work.
Absolute Lengths
There are a total of 6 units that are absolute lengths. They are called absolute length units because they base their dimensions on real-world lengths. Because of this, using absolute lengths is a good fit for prints. Among them, we have:
