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
Working with CSS Units
CSS units are essential for defining measurements in web design such as width, margin, padding, font-size, and border-width. The length is specified using a numerical value followed by a unit such as px, em, rem, etc. Important: No white spaces are allowed between the numerical value and the unit.
Syntax
property: value + unit; /* Examples */ width: 300px; font-size: 1.5em; margin: 10%;
Types of CSS Units
CSS units are divided into two main categories −
- Absolute units − Fixed size units that don't change based on other elements
- Relative units − Units that scale relative to other elements or viewport
Absolute Units
Absolute units have fixed values and appear the same size regardless of the parent element or screen size.
| Unit | Abbreviation | Description |
|---|---|---|
| Pixels | px | Screen pixels (most common) |
| Points | pt | 1/72 of an inch |
| Inches | in | Physical inches |
| Centimeters | cm | Physical centimeters |
| Picas | pc | 12 points |
Relative Units
Relative units scale based on other elements or the viewport, making designs more responsive.
| Unit | Abbreviation | Description |
|---|---|---|
| Percent | % | Relative to parent element |
| Em | em | Relative to parent's font-size |
| Root em | rem | Relative to root element's font-size |
| Ex | ex | Height of lowercase "x" |
| Viewport width | vw | 1% of viewport width |
| Viewport height | vh | 1% of viewport height |
| Character | ch | Width of the "0" character |
Example: Comparing Different Units
The following example demonstrates various CSS units in action −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
font-size: 16px;
padding: 20px;
background-color: #f0f0f0;
}
.absolute-unit {
width: 200px;
height: 50px;
background-color: #ff6b6b;
margin: 10px 0;
color: white;
text-align: center;
line-height: 50px;
}
.relative-unit {
width: 50%;
height: 3em;
background-color: #4ecdc4;
margin: 1rem 0;
color: white;
text-align: center;
line-height: 3em;
}
.viewport-unit {
width: 30vw;
height: 10vh;
background-color: #45b7d1;
color: white;
text-align: center;
line-height: 10vh;
}
</style>
</head>
<body>
<div class="container">
<div class="absolute-unit">200px width</div>
<div class="relative-unit">50% width, 3em height</div>
<div class="viewport-unit">30vw width, 10vh height</div>
</div>
</body>
</html>
Three colored boxes appear: - Red box with fixed 200px width - Teal box that's 50% of container width with height based on font-size - Blue box that scales with viewport dimensions
Conclusion
Understanding CSS units is crucial for responsive design. Use absolute units like px for fixed layouts and relative units like em, rem, and % for flexible, scalable designs that adapt to different screen sizes.
156 Views
