Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Relative Length Units in CSS
Relative length units in CSS are used to specify a length relative to another length property. Let use see some key units in CSS with the description −
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 |
The em length unit
Let us see an example where we have set the font size with the em unit −
font-size: 1.4em;
Example
Here is the example −
<!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>
The ch relative unit
Let us now see another example where we have set the font size with the ch unit −
font-size: 4ch;
Example
Here is the 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>
The vh length unit
Let us see an example where we have set the height property to set a div 100% of window height. The viewport height is set 100vh i.e., 100% of the viewport?s height −
height: 100vh;
Example
Here is the example −
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
html, body {
display: flex;
flex-direction: row;
justify-content: space-around;
margin: 0px;
height: 100vh;
box-shadow: inset 0 0 40px lightblue;
}
div {
width: 40%;
height: 100vh;
text-align: center;
box-shadow: inset 0 0 20px lightcoral;
}
</style>
</head>
<body>
<div>Watch This!</div>
<div>Let Me Show You How The Boss Does It!!</div>
<div>Open Up The Sky!!</div>
<div>GO! GO! GO!!</div>
</body>
</html>
1K+ Views
