Base Font Size
Using rem we can set a base font size for the entire document using rem units, then size other elements relative to this base size.
Example: In this example by using rem units, the layout will adapt if the root font size changes, making it more flexible and responsive.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Rem Units Example</title>
<style>
html {
font-size: 16px;
/* Set the root font size to 16px */
}
.container {
width: 20rem;
/* 20 times the root font size,
so it's 320px */
margin: 0 auto;
padding: 20px;
background-color: #dadada;
}
.box {
width: 5rem;
/* 5 times the root font size,
so it's 80px */
height: 5rem;
/* 5 times the root font size,
so it's 80px */
background-color: #3498db;
margin-bottom: 1rem;
/* 1 times the root font size,
so it's 16px */
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
Output:
What are Rem Units in CSS ?
Rem units in CSS are relative units of measurement. They stand for root em and are based on the font size of the root element (<html>). If the root font size is 16px, 1rem equals 16px. This ensures consistent, scalable sizing across different elements.
Table of Content
- Base Font Size
- Modular Scaling
- Consistent Spacing