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
CSS units – %, em, rem, px, vh, vw
CSS units determine how we measure and size elements on web pages. The most commonly used units include pixels (px), em, rem, percentages (%), and viewport units (vh, vw). Each unit has specific use cases and behaviors that affect responsive design and accessibility.
Syntax
selector {
property: value unit;
}
Absolute Units
Pixels (px)
Pixels are fixed-size units representing the smallest display unit. While reliable for precise control, they don't scale with user preferences or viewport changes
<!DOCTYPE html>
<html>
<head>
<style>
.px-box {
width: 200px;
height: 100px;
background-color: #3498db;
color: white;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="px-box">200px width, 16px font</div>
</body>
</html>
A blue box with fixed dimensions (200px × 100px) containing white text at 16px font size.
Relative Units
em Unit
The em unit is relative to the parent element's font size. By default, 1em equals 16px, but this changes if the parent has a different font size
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
font-size: 20px;
background-color: #f39c12;
padding: 1em;
margin: 10px 0;
}
.child-em {
font-size: 1.2em;
background-color: #e74c3c;
color: white;
padding: 0.5em;
margin: 0.5em 0;
}
</style>
</head>
<body>
<div class="parent">
Parent (20px)
<div class="child-em">Child with 1.2em (24px)</div>
</div>
</body>
</html>
An orange container with red child element. The child text appears larger (24px) because 1.2em × 20px = 24px.
rem Unit
The rem unit is relative to the root element's font size, providing more predictable scaling than em
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-size: 18px;
}
.parent-large {
font-size: 24px;
background-color: #9b59b6;
padding: 1rem;
margin: 10px 0;
color: white;
}
.child-rem {
font-size: 1.2rem;
background-color: #2ecc71;
padding: 0.5rem;
margin: 0.5rem 0;
}
</style>
</head>
<body>
<div class="parent-large">
Parent (24px)
<div class="child-rem">Child with 1.2rem (21.6px)</div>
</div>
</body>
</html>
A purple container with green child element. The child text is 21.6px (1.2rem × 18px) regardless of parent size.
Percentage Units
Percentage units are relative to the parent element's corresponding property, making them ideal for responsive layouts
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 400px;
height: 200px;
background-color: #34495e;
position: relative;
margin: 10px 0;
}
.percentage-child {
width: 75%;
height: 50%;
background-color: #e67e22;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<div class="percentage-child">75% × 50%</div>
</div>
</body>
</html>
A dark gray container (400px × 200px) with an orange child element taking 75% width and 50% height.
Viewport Units
vw and vh Units
Viewport units are relative to the browser viewport dimensions. 1vw equals 1% of viewport width, and 1vh equals 1% of viewport height
<!DOCTYPE html>
<html>
<head>
<style>
.viewport-box {
width: 50vw;
height: 30vh;
background-color: #1abc9c;
color: white;
font-size: 4vw;
display: flex;
align-items: center;
justify-content: center;
margin: 2vh 0;
}
</style>
</head>
<body>
<div class="viewport-box">50vw × 30vh</div>
</body>
</html>
A teal box that takes 50% of the viewport width and 30% of the viewport height, with text that scales with the viewport.
Comparison Table
| Unit | Type | Relative To | Use Case |
|---|---|---|---|
px |
Absolute | Screen pixels | Fixed layouts, borders |
em |
Relative | Parent font-size | Component spacing |
rem |
Relative | Root font-size | Typography, consistent sizing |
% |
Relative | Parent element | Responsive layouts |
vw/vh |
Relative | Viewport dimensions | Full-screen elements |
Conclusion
Understanding CSS units is crucial for creating responsive, accessible designs. Use rem for typography, % for flexible layouts, viewport units for full-screen elements, and px only when fixed sizing is required. Choose units based on your design goals and responsive requirements.
1K+ Views
