Web Development - CSS Units
CSS Units
CSS uses different units to define sizes for margins, padding, fonts, and layout elements. Understanding how each unit works helps you create flexible, responsive, and consistent designs.
Absolute vs Relative Units
CSS units are divided into two categories:
- Absolute units - fixed sizes that don't change (e.g.,
px). - Relative units - scale relative to another value (e.g., parent size or viewport).
Absolute Units
Absolute units always appear the same size, regardless of screen or zoom level.
| Unit | Description | Example |
|---|---|---|
px | Pixels (most common unit) | width: 200px; |
cm | Centimeters | width: 5cm; |
mm | Millimeters | height: 50mm; |
in | Inches (1in = 96px) | width: 1in; |
pt | Points (1pt = 1/72 inch) | font-size: 12pt; |
pc | Picas (1pc = 12pt) | font-size: 1pc; |
Note: Absolute units are not recommended for responsive design because they don't scale well on different screens.
Relative Units
Relative units change depending on the parent element, font size, or viewport. They are essential for responsive layouts.
| Unit | Description | Example |
|---|---|---|
% | Relative to parent element | width: 50%; |
em | Relative to the current element's font size | padding: 2em; |
rem | Relative to the root (HTML) font size | font-size: 1.5rem; |
vw | 1% of the viewport width | font-size: 5vw; |
vh | 1% of the viewport height | height: 100vh; |
vmin | 1% of the smaller dimension (width or height) | font-size: 3vmin; |
vmax | 1% of the larger dimension | width: 80vmax; |
Using Percentages
Percentages are based on the parent element's size, making them ideal for flexible layouts.
Example
Percentage-based width:
div.container {
width: 80%;
margin: auto;
background-color: lightgray;
}
Try it Yourself »
Using em and rem
em and rem units are commonly used for font sizes and spacing:
1em= current element's font size.1rem= root element's font size (usually 16px by default).
Example
em vs rem:
html { font-size: 16px; }
div { font-size: 20px; }
p.one { font-size: 1em; } /* 20px */
p.two { font-size: 1rem; } /* 16px */
Try it Yourself »
Viewport Units
Viewport units are relative to the browser window size. They are great for responsive typography and full-screen sections.
Example
Full-screen section using viewport height:
section {
height: 100vh;
background-color: lightblue;
}
Try it Yourself »
Combining Units
You can mix units to create flexible designs - for example, using fixed padding with percentage widths.
Best Practices
- Use
pxfor fine control in icons or borders. - Use
%,em, orremfor scalable layouts. - Use
vhandvwfor full-screen sections and responsive text. - Set
html { font-size: 100%; }for accessibility and rem consistency.
Summary
- Absolute units (like
px) have fixed sizes. - Relative units (
%,em,rem,vh,vw) scale dynamically. - Use relative units for responsive designs.
- Viewport units help elements fill the screen smoothly.
Next, you'll learn about CSS Variables - how to store reusable values and make your stylesheets easier to manage and maintain.
