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
-
Economics & Finance
Selected Reading
Relative Length Units in CSS
Relative length units in CSS are used to specify a length relative to another length property. These units provide flexibility and responsiveness in web design by scaling based on context rather than fixed values.
Syntax
selector {
property: value + unit;
}
Types of Relative Length Units
| Unit | Description |
|---|---|
| em | Relative to the font-size of the element (4em = 4 times current font size) |
| ex | Relative to the x-height of the current font |
| ch | Relative to width of the "0" character |
| rem | Relative to font-size of the root element |
| vw | Relative to 1% of the width of the viewport |
| vh | Relative to 1% of the height of the viewport |
| vmin | Relative to 1% of viewport's smaller dimension |
| vmax | Relative to 1% of viewport's larger dimension |
| % | Relative to the parent element |
Example: The em Unit
The em unit scales relative to the font-size of the current element −
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
font-size: 16px;
margin-bottom: 20px;
}
.em-text {
font-size: 1.5em; /* 1.5 × 16px = 24px */
color: blue;
}
.nested {
font-size: 2em; /* 2 × parent font size */
color: red;
}
</style>
</head>
<body>
<div class="parent">
Parent text (16px)
<div class="em-text">
Child with 1.5em (24px)
<div class="nested">Nested 2em (48px)</div>
</div>
</div>
</body>
</html>
Text appears with different sizes: parent at 16px, child at 24px (1.5×16), and nested child at 48px (2×24). The em units cascade and multiply.
Example: Viewport Units (vh and vw)
Viewport units are relative to the browser window size −
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.full-height {
height: 100vh; /* Full viewport height */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 5vw; /* Font size based on viewport width */
}
</style>
</head>
<body>
<div class="full-height">
Responsive Text
</div>
</body>
</html>
A full-screen gradient box appears that always fills 100% of the browser height. The text size scales with the viewport width, becoming larger or smaller as you resize the browser window.
Example: rem vs em Comparison
The rem unit is relative to the root font size, while em is relative to the parent −
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-size: 16px; /* Root font size */
}
.large-parent {
font-size: 24px;
border: 2px solid blue;
padding: 10px;
margin-bottom: 20px;
}
.em-child {
font-size: 1.5em; /* 1.5 × 24px = 36px */
color: blue;
}
.rem-child {
font-size: 1.5rem; /* 1.5 × 16px = 24px */
color: red;
}
</style>
</head>
<body>
<div class="large-parent">
Parent (24px)
<div class="em-child">em child (36px)</div>
<div class="rem-child">rem child (24px)</div>
</div>
</body>
</html>
A blue bordered box contains text of different sizes. The em child appears larger (36px) as it inherits from the 24px parent, while the rem child stays at 24px as it's based on the root 16px font size.
Conclusion
Relative length units provide flexibility and responsiveness in CSS. Use rem for consistent sizing, em for scalable components, and viewport units (vh, vw) for responsive layouts that adapt to screen size.
Updated on: 2026-03-15T13:47:55+05:30
1K+ Views
Advertisements