- Absolute units
- Relative units
- Relative units calculated from the font size
- Relative units calculated from screen size
In past lessons, you learned about px units. You may notice that you should specify 20px somewhere and that this value is fixed. It doesn't matter what's around the item with that value, what screen resolution, or what device is being used. Twenty pixels will always be twenty pixels.
A pixel is an absolute unit of measurement. As mentioned above, this unit of measurement is completely fixed and does not change due to external factors. You can only resize something by overriding it.
Besides absolute units of measurement, there are also relative units of measurement. You can tell by their name that they depend on something. We'll look at what it is they depend on at the end of the lesson.
This lesson will cover all the basic units of measurement. In fact, there are quite a few, but not all of them are used all the time. If you want to familiarize yourself with all the available units, there will be a link to the official docs at the end of the lesson.
Absolute units
Absolute units can generally be considered to be the simplest. As you get more experienced, you'll be able to tell the size of a particular element within the document just by looking at it.
The most common unit is the pixel. You'll already be familiar with it from other lessons. But what is a pixel? Without getting too technical, a pixel is the smallest particle on a screen that is used to create an image. Basically, we're saying how many of these elements on your device's screen should be occupied.
It's important to understand that 100 pixels on one screen may not equal 100 pixels on another. It all depends on the size of the pixels on the monitor. And this, in turn, depends on the characteristics of the screen and its resolution.
For these reasons, we can call the pixel both a relative and an absolute unit of measurement. It all depends on what point of view we're looking from. The pixel is important to us in the context of CSS, where it's an absolute unit.
div {
height: 100px;
/* A block element always takes up 100 pixels. The actual size (in centimeters) may be different on different devices */
}
Other absolute units are seldom used in web development. It's worth listing them, but chances are you'll never use them.
- cm - centimeters
- mm - millimeters
- Q - quarter millimeters
- in - inches
- pc - picas, a typographic term
- pt - point
Note that among these units are some you know from real life. This can be useful when setting up a print layout.
Relative units
This will be the most confusing part of the lesson. Relative units take their value from other values. The most versatile of these units are percentages. They always take their values from the closest parent element. The remaining units can be divided into two groups:
- Relative units calculated from the font size
- Relative units calculated from the screen size. This is a bit of a crude comparison; in fact, the calculation is based on the size of the viewport. You will learn about what this is in our course on adaptability
Percentage
As already mentioned, percentages are calculated from the value of the same property of the nearest parent. The parent is the element inside which the current block is located. For example:
<html>
<body>
<!-- body is a child element of html. html is the parent element for body -->
<main>
<!-- main is a child element of body. body is the parent element for main -->
<section>
<!-- section is a child element of main. main is the parent element for section -->
<p><!-- p is a child element of section. section is the parent element for p --></p>
<div><!-- div is a child element of section. section is the parent element for div --></div>
</section>
</main>
</body>
</html>
Let's take the width and size of the font as an example.
<section class="w-400px size-50px bg-blue">
<div class="w-50p bg-gray">
<p class="size-70p">Text paragraph</p>
</div>
</section>
.w-400px {
width: 400px;
}
.w-50p {
width: 50%;
}
.size-50px {
font-size: 50px;
}
.size-70p {
font-size: 70%;
}
What's going on here? Let's break it down step by step:
- The main parent
<section>is sized in absolute units. The width is 400 pixels and the font size is 50 pixels - The nested
<div>has a size of 50%. This size is relative and is calculated relative to the nearest parent. This parent has a size of 400 pixels. Therefore, the block size will be 200 pixels - A paragraph of text has a font size of 70%. The closest parent with a set font size is
<section>. The paragraph will be set to a font size of 70% of 50 pixels. I.e., 35px
An interesting example is setting percentages for a tag or class that involves nesting. Take a look at the following example:
<ul class="size-30px">
<li>Item 1
<ul>
<li>Item 1.1</li>
<li>Item 1.2
<ul>
<li>Item 1.2.1</li>
<li>Item 1.2.2</li>
</ul>
</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
.size-30px {
font-size: 30px;
}
li {
font-size: 70%;
}
Before you go any further, try to analyze this markup and calculate what font sizes each list item will have. Don't worry if you get confused. It can be tricky.
Have you thought about it? Well done! Now let's see what it looks like:
Let's analyze the result:
- The font size of the first
<ul>element is 30 pixels - All
<li>elements have a font size of 70%. This means that the deeper the list is nested, the smaller the font size:- Items 1, 2, 3, and 4 will have a size of 21 pixels
- Items 1.1 and 1.2 are inside Item 1. The font size of this element is 21 pixels. This follows from the last point. Now the font size is counted from precisely 21 pixels
- Items 1.1 and 1.2 will have a size of 14.7 pixels
- Items 1.2.1 and 1.2.2 are nested within Item 1.2. The font size of this item is 14.7 pixels. This follows from the last point
- Items 1.2.1 and 1.2.2 will have a font size of 10.29 pixels
Relative units calculated from the font size
Now you can breathe, the hardest part is over. If you've studied percentages carefully, then the other relative units won't cause any difficulty. Two basic relative units of measure depend on the size of the font: em and rem.
The value of em is very similar to the use of percent. It shows how much larger the size will be than the closest calculated font-size value. If you replace 70% with 0.7em in the last example with lists, the result will be the same.
So, what's the point of em? This unit of measure can be used not only for the font but also for any other properties that take a numerical value. For example, in the following code, the bottom margin will be 60px:
section {
font-size: 30px;
}
section p {
margin-bottom: 2em;
}
But if a paragraph has its own font-size value, then the em unit will be calculated from that. This is where the meaning of the phrase "than the nearest calculated font-size value" is calculated.
The second such unit is rem. The way it works is exactly the same as em. But there is one huge difference: the rem is counted from the font size of the root element. The root element is <html>. It's the font size of this element that's taken into account when calculating the rem unit.
Let's go back to the example with the list. Replacing em with rem gives a completely different result. 0.7rem is calculated from the same place, but without taking nesting into account. In total, each element will have a font size of 11.2px. This is due to the standard font size of 16 pixels in most browsers.
You will notice that the <ul> element having 30px text plays no role in this case.
Relative units calculated from screen size
CSS allows you to set the dimensions relative to the current viewport size, that being the size of the browser window that is accessible without scrolling. The basic two units are vw (viewport width) and vh (viewport height). You can think of it as a percentage of the viewport size.
These units are often used to create a section for the entire available area of the browser.
<section class="one-screen-section"></section>
body {
margin: 0;
padding: 0;
}
.one-screen-section {
width: 100vw;
height: 100vh;
background: #80deea;
}
Try resizing the browser window using the CodePen example. Whatever browser width you set, the size of the section will automatically change. Consequently, there'll be no opportunity to scroll either horizontally or vertically.
Recommended materials
Are there any more questions? Ask them in the Discussion section.
The Hexlet support team or other students will answer you.
For full access to the course you need a professional subscription.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.
