Introduction
CSS has different properties that require their lengths to be specified. Some examples of these properties are font-size, padding, margin, width, etc.
This length is basically expressed in a variety of units.
And this length can be defined as a number that is followed by the unit of the length that can be anything like 20px or 15em etc.
Let’s have a look at the example that shows us how we can provide length to our element properties in CSS.
Example
|
h1 { . font-size: 50px; } p { . font-size: 20px; . line-height: 40px; } |
Considering this example, we can see a number after every property, but what does that number actually mean? Let's clear this question of ours by reading the next topic.
Numbers
Basically, the numbers that we use here are used to define line-height, opacity, and, moreover, the color values too.
Every number has a specific meaning that directly depends on its respective context.
Like if we specify the line height, then the number, when specified without a unit, represents the ratio.
|
p{ . font-size: 20px; . line-height: 1; } |
Now when we define the lengths, these lengths are of two types, i.e., absolute and relative.
Let’s have a look at both types now and see how they work.




