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
Difference between PX, EM and Percent
In CSS, units of measurement define how sizes and distances are calculated. The three most commonly used units are px (pixels), em (relative to font size), and % (percentage). Each has different behaviors and use cases.
Syntax
selector {
property: value px; /* Absolute pixel units */
property: value em; /* Relative to font size */
property: value%; /* Percentage of parent element */
}
Unit Comparison
| Unit | Type | Relative To | Best For |
|---|---|---|---|
px |
Absolute | Screen pixels | Fixed layouts, borders, small elements |
em |
Relative | Current element's font size | Scalable typography, padding/margins |
% |
Relative | Parent element | Responsive layouts, widths |
Example: Pixel Units (px)
The px unit defines a measurement in screen pixels. It provides absolute, fixed sizing ?
<!DOCTYPE html>
<html>
<head>
<style>
.px-box {
width: 200px;
height: 100px;
padding: 20px;
background-color: #ff6b6b;
color: white;
font-size: 16px;
}
</style>
</head>
<body>
<div class="px-box">Fixed 200px width</div>
</body>
</html>
A red box with exactly 200px width, 100px height, and 20px padding appears. The size remains constant regardless of screen size or parent elements.
Example: Em Units (em)
The em unit is relative to the current element's font size. If font-size is 16px, then 1em equals 16px ?
<!DOCTYPE html>
<html>
<head>
<style>
.em-container {
font-size: 20px;
}
.em-box {
width: 10em; /* 10 × 20px = 200px */
height: 3em; /* 3 × 20px = 60px */
padding: 1em; /* 1 × 20px = 20px */
background-color: #4ecdc4;
color: white;
margin-bottom: 1em;
}
.small-font {
font-size: 12px;
}
</style>
</head>
<body>
<div class="em-container">
<div class="em-box">20px font: 10em = 200px wide</div>
</div>
<div class="em-container small-font">
<div class="em-box">12px font: 10em = 120px wide</div>
</div>
</body>
</html>
Two teal boxes appear. The first is wider (200px) because its font-size is 20px. The second is narrower (120px) because its font-size is 12px, showing how em scales with font size.
Example: Percentage Units (%)
The % unit defines a measurement as a percentage relative to the parent element ?
<!DOCTYPE html>
<html>
<head>
<style>
.parent-wide {
width: 400px;
background-color: #f0f0f0;
padding: 10px;
margin-bottom: 20px;
}
.parent-narrow {
width: 200px;
background-color: #f0f0f0;
padding: 10px;
}
.percent-box {
width: 50%;
height: 60px;
background-color: #45b7d1;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="parent-wide">
<div class="percent-box">50% of 400px = 200px</div>
</div>
<div class="parent-narrow">
<div class="percent-box">50% of 200px = 100px</div>
</div>
</body>
</html>
Two blue boxes appear inside gray containers. The first box is 200px wide (50% of 400px parent), and the second is 100px wide (50% of 200px parent), demonstrating percentage-based sizing.
Key Differences
- px creates fixed sizes that don't change
- em scales with font size, making it ideal for typography-related spacing
- % scales with parent element, perfect for responsive layouts
Conclusion
Choose px for fixed designs, em for scalable typography, and % for responsive layouts. Understanding these units is essential for creating flexible, maintainable CSS.
Updated on: 2026-03-15T13:38:27+05:30
677 Views
Advertisements