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>