Everything you need to know about CSS units.
A detailed overview of all 15 CSS units.
--
Did you know there are 15 CSS units in total? Working with such a variety of options to choose from can be challenging especially if you are a beginner and want to explore everything that web-dev has to offer. In this blog, we are going to be looking at each one of the CSS units and understand how they function. CSS units can be classified into two categories as follows —
Relative Units
The relative units can further be classified on the basis of the attributes they depend on. This figure shows the same. They can be based upon their parent element’s dimensions or the current font size or even the viewport dimensions.
1. Percentage (%)
This unit is relative to the height and width of its parent element. For eg, if the parent element is 200px wide and the child div is given a width of 50% then the width of the child will be 50% of 200px which is 100px. Take the following example —
- Case 1
.child {height:50%; width:50%; background-color:lightpink;} - Case 2
.child {height:80%; width:50%; background-color:lightpink;}
2. vh and vw
As the name suggests, this unit is relative to the viewport width and viewport height. For using this unit, we need to assume that our screen height and width are divided into 100 equal parts each. Thus, when I say 100vh, it would mean the entire height of the viewport.
The example below is a typical example of ‘vh’ and ‘vw’ units. We can see that whenever the viewport changes its height and width, the corresponding height and width of the pink container changes accordingly.
.container {
background-color: lightpink;
width: 50vw;
height: 50vh; }
3. vmin and vmax
These are a pair of relatively lesser known units. The unit vmin means that the side of the element depends upon the parameter/side of the viewport which has the minimum length. That is, if the height of the browser window is less than its width, 1vmin will be equivalent to 1vh. If the width of the browser is less than its height, 1vmin is equivalent to 1vw.
Vmax on the other hand is exactly opposite to vmin. It uses the ratio of the larger side of the viewport.
Take the following example —
- Case 1
.container {height:50vmax; width:50vmax;} - Case 2
.container {height:50vmin; width:50vmin;}
I know, understanding vmin and vmax can be a tad bit difficult. It is one of the reasons they aren't used widely in CSS. Moving on.
4. ems and rems
My favorite and most widely used set of units! These are font sized based units.
Em — This unit depends on the parent’s font size. That means that if the parent font size is 10px, 1em = 10px. This is generally used for sizing various elements. Following are some cases displaying the same. Even though the child’s dimensions are 1em in each case, its size shows a substantial change when the parent's font size changes.
CASE 1.parent{
height: 200px;
width: 200px;
font-size: 30px;
}
.child{
height: 1em;
width: 1em;
}CASE 2.parent{
height: 200px;
width: 200px;
font-size: 100px;
}
.child{
height: 1em;
width: 1em;
}
Rem — Rem just means ‘root-em’. This unit is based on the font size of the root. Now by default, the root size of any HTML document is 16px. That means that 1 rem = 16 px always until and unless you explicitly define it. This unit is very useful when it comes to margins and padding. It is also a smarter way to make your websites responsive. You can just change the root font size and all other elements will adjust according to it.
Here are few examples for rem units. Look at the explicitly defined root font size.
CASE 1
:root{
font-size: 80px;
}
.parent{
height: 200px;
width: 200px;
}
.child{
height: 1rem;
width: 1rem;
}CASE 2
:root{
font-size: 150px;
}
.parent{
height: 200px;
width: 200px;
}
.child{
height: 1rem;
width: 1rem;
}
5. ex and ch
This is definitely the pair of units I find the funniest. Let's take a look at them.
ex — essentially means the height of the letter ‘x’ in the parent div. It will not only change with the parent font attribute but also with the font family. For instance, serif will have a smaller ex unit as compared to sans-serif even if the font size is the same. This is the result of the font family configuration.
ch — while ex is the height of the letter x, ch is the width of the number ‘0’. Imagine measuring the width of 0, that is how much is 1ch for a particular font size of the parent.
Absolute Units
These are not based on anything else on the page. Rather, these are real-world measurements. They are mainly used in printing applications, prototyping, wireframing, etc. Basically, more related to the design aspect of any project.
1. Pixels (px)
Who doesn't love pixels? Pixels are the way the world works. Designs are made in pixels, web pages are rendered in pixels, javascript reads images in pixels and hence, because of all the above reasons and more, pixels are the most used units in a variety of fields.
If I say I want my container such that .container { height: 200px; width: 200px;} , it simply gives me this as the output.
2. Inches, Centimeters, Millimeters, Points, and Picas
Pre-defined lengths include these 5 units. These units are related as-
- 1 inch = 2.5 cm = 25 mm
- 1cm = 10 mm
- 1 point = 1/72th of an inch
- 1 pica = 1/6th of an inch = 12 points
- 1 px = 1/96th of an inch
Below is an example of them in use.
height of every element is fixed at 20px.one{
width: 5in;
}.two{
width: 5cm;
}.three{
width: 5mm;
}.four{
width: 5pt;
}.five{
width: 5pc;
}
Hence, we come to an end of CSS units. You will be amazed at what you can create using CSS. Styling of the fanciest of websites that have intricate elements and extravagant animations all boils down to plain CSS. So, never hesitate to experiment with CSS and try out new things!
Hope you all liked this blog.
Connect with me on LinkedIn here!
