Computer >> Computer tutorials >  >> Programming >> CSS

Relative Length Units in CSS


Relative length units in CSS is used to specify a length relative to another length property.

Sr.NoUnit & Description
1em
Relative to the font-size of the element i.e 4em means 4 times the size of the current font.
2ex
Relative to the x-height of the current font
3ch
Relative to width of the 0
4rem
Relative to font-size of the root element
5vw
Relative to 1% of the width of the viewport*
6vh
Relative to 1% of the height of the viewport*
7vmin
Relative to 1% of viewport's* smaller dimension
8vmax
Relative to 1% of viewport's* larger dimension
9%
Relative to the parent element

Example

Let us see an example using Relative Length Units −

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   text-decoration: overline underline;
   text-decoration-color: blue;
   font-size: 1.4em;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

Output

Relative Length Units in CSS

Example

Let us now see another example −

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   text-decoration: overline underline;
   text-decoration-color: blue;
   font-size: 4ch;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

Output

Relative Length Units in CSS