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
Understanding CSS Absolute and Relative Units
CSS length units are essential for styling web pages, allowing you to set dimensions for fonts, height, width, margins, padding, and more. These units are categorized into two main types: Absolute Units and Relative Units.
CSS Absolute Units
Absolute length units have fixed sizes that don't change based on other elements or the viewport. They are ideal when you know the exact output format and need precise control.
| Unit | Description |
|---|---|
| px | Pixels (1px = 1/96th of 1 inch) |
| pt | Points (1pt = 1/72 of 1 inch) |
| pc | Picas (1pc = 12 points) |
| in | Inches (1in = 96px = 2.54cm) |
| cm | Centimeters |
| mm | Millimeters |
Example: Using Pixels (px)
The following example demonstrates using pixels for container dimensions −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 150px;
width: 300px;
background-color: #f0f0f0;
border: 2px solid #333;
padding: 20px;
margin: 10px;
}
.text {
font-size: 16px;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<p class="text">This container is 300px wide and 150px tall with 16px font size.</p>
</div>
</body>
</html>
A gray bordered box (300px × 150px) with 20px padding and 16px text appears on the page.
CSS Relative Units
Relative length units are proportional to other elements or the viewport, making them ideal for responsive design.
| Unit | Description |
|---|---|
| em | Relative to parent element's font size |
| rem | Relative to root element's font size |
| % | Relative to parent element |
| vw | 1% of viewport width |
| vh | 1% of viewport height |
| ch | Width of character "0" in current font |
Example: Using em and rem Units
This example shows the difference between em and rem units −
<!DOCTYPE html>
<html>
<head>
<style>
html {
font-size: 16px; /* Root font size */
}
.parent {
font-size: 20px;
background-color: #e8f4f8;
padding: 20px;
margin: 10px 0;
}
.em-example {
font-size: 1.5em; /* 1.5 × 20px = 30px */
color: #2196F3;
}
.rem-example {
font-size: 1.5rem; /* 1.5 × 16px = 24px */
color: #FF9800;
}
</style>
</head>
<body>
<div class="parent">
Parent has 20px font size
<p class="em-example">This text uses 1.5em (30px)</p>
<p class="rem-example">This text uses 1.5rem (24px)</p>
</div>
</body>
</html>
A light blue container with three different font sizes: 20px parent text, 30px blue text (em), and 24px orange text (rem).
Example: Viewport Units for Responsive Design
Viewport units create truly responsive layouts that scale with screen size −
<!DOCTYPE html>
<html>
<head>
<style>
.hero-text {
font-size: 8vw;
color: #333;
text-align: center;
margin: 2vh 0;
}
.description {
font-size: 3vw;
color: #666;
text-align: center;
max-width: 80%;
margin: 0 auto;
}
.box {
width: 50vw;
height: 30vh;
background-color: #4CAF50;
margin: 2vh auto;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
</style>
</head>
<body>
<h1 class="hero-text">Responsive Text</h1>
<p class="description">This text scales with viewport size</p>
<div class="box">50vw × 30vh Box</div>
</body>
</html>
A responsive layout with large heading text, smaller description text, and a green box, all scaling proportionally with viewport size.
Conclusion
Absolute units provide fixed dimensions ideal for print layouts, while relative units create flexible, responsive designs that adapt to different screen sizes and user preferences. Choose the appropriate unit type based on your design requirements.
549 Views
