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
Em vs Rem units in CSS?
In CSS, you can use two types of units for sizing elements: absolute units (like px, cm, mm) and relative units. Relative units are particularly useful because they scale relative to other elements, making your designs more flexible and responsive.
In this tutorial, we will compare the em and rem units in CSS, two important relative units that behave differently based on their reference point.
Syntax
selector {
font-size: value em; /* relative to parent element */
margin: value rem; /* relative to root element */
}
The Em Unit
The em unit is relative to the font-size of its parent element. If the parent's font-size changes, the child element's size will change proportionally. This can lead to a compounding effect in nested elements.
Example
In this example, the child element's font-size is set to 2em, making it twice the size of its parent
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
font-size: 16px;
background-color: #e0e0e0;
padding: 10px;
margin: 10px;
}
.child {
font-size: 2em; /* 2 * 16px = 32px */
background-color: #ffeb3b;
padding: 1em; /* 1 * 32px = 32px */
margin: 0.5em; /* 0.5 * 32px = 16px */
}
</style>
</head>
<body>
<div class="parent">
Parent element (16px)
<div class="child">
Child element (2em = 32px)
</div>
</div>
</body>
</html>
A gray parent container with 16px text and a yellow child container with larger text (32px). The child's padding and margins are also proportionally larger based on its own font-size.
The Rem Unit
The rem unit is relative to the font-size of the root element (<html>). Unlike em, rem values are consistent throughout the document and don't compound in nested elements.
Example
In this example, the child element uses rem units, which are relative to the root element regardless of the parent's font-size
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-size: 18px; /* Root font-size */
}
.parent {
font-size: 12px; /* Different from root */
background-color: #e0e0e0;
padding: 10px;
margin: 10px;
}
.child {
font-size: 2rem; /* 2 * 18px = 36px (based on root, not parent) */
background-color: #4caf50;
padding: 1rem; /* 1 * 18px = 18px */
margin: 0.5rem; /* 0.5 * 18px = 9px */
color: white;
}
</style>
</head>
<body>
<div class="parent">
Parent element (12px)
<div class="child">
Child element (2rem = 36px)
</div>
</div>
</body>
</html>
A gray parent container with small text (12px) and a green child container with large white text (36px). The child's size is based on the root element (18px), not the parent's 12px font-size.
Comparison
| Unit | Relative To | Compounding Effect | Best Use Case |
|---|---|---|---|
em |
Parent element | Yes | Component-level sizing |
rem |
Root element | No | Global consistency |
Conclusion
Use em units when you want sizes to scale relative to the parent element, creating component-level consistency. Use rem units when you need predictable, consistent sizing throughout your document relative to the root element.
657 Views
