Relative length units in CSS is used to specify a length relative to another length property.
| Sr.No | Unit & Description |
|---|---|
| 1 | em Relative to the font-size of the element i.e 4em means 4 times the size of the current font. |
| 2 | ex Relative to the x-height of the current font |
| 3 | ch Relative to width of the 0 |
| 4 | rem Relative to font-size of the root element |
| 5 | vw Relative to 1% of the width of the viewport* |
| 6 | vh Relative to 1% of the height of the viewport* |
| 7 | vmin Relative to 1% of viewport's* smaller dimension |
| 8 | vmax 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
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
