Types of values: Absolute and relative

Let’s make our avatar more fashionable. In other words, let’s make it round. We can increase the border-radius value to half of the size of the avatar image, in other words, to 40px, and we will get a circle. But if later we decide to create a new avatar with some other dimensions, then we will again have to change styles. But is there a different way to immediately and universally apply our changes? Yes, there is! By using percentages:

border-radius: 50%;

If we determine a rounding radius as a percentage, then it will be calculated relative to the dimensions of the element, and it will change together with these dimensions. If we set this radius in pixels, then it will always absolutely remain the same. This is why units of measurement in CSS are divided into absolute and relative.

Absolute units of measurement are tied to real physical dimensions, and they are connected to each other by rigid proportions. Examples of absolute units of measurement:

font-size: 1cm;  /* 1 cm  */
font-size: 10mm; /* 1 cm contains 10 mm */
font-size: 38px; /* 1 cm contains about 38 pixels */

Pixels, px, are the most commonly used. The other absolute units of measurement are almost never used.

Relative units of measurement describe values that depend on other values. For example, the width of an element that is defined as a percentage depends on the width of the parent element, and the width of an element determined in em depends on the font size of the element itself.

The units em, rem, vh, vw, and several others are relative, and certain others are understood to be percentages. Each of these units solves its own assigned set of tasks. For example, percentages are used to create a flexible layout, and em is used to lay out government websites with special additional requirements for text scaling.

A list of all of the absolute units of measurement and the relationships between them are provided in the specification. In addition, the specification includes a list of all of the relative units of measurement and a description of the calculation rules.