 |
In this article, we aim to provide complete and up-to-date documentation on units of measurement in CSS. The goal is to offer a useful reference both for those approaching this topic for the first time and for those who want to refresh their memory and have a quick reference at hand. You'll find clear explanations, summary tables, and practical examples to understand the differences between each type of unit.
The article's structure is as follows:
- Classification of Units of Measurement
- Units of Time and Angles
- Practical Tips
- Useful references
1. Introduction
CSS units define the size, spacing, and proportions of elements and text. Choosing the right unit is important to achieve a responsive, accessible and coherent design.
2. Classification of Units of Measurement
2.1. Absolute Units
Fixed measurements, independent of context or screen size.
| Unit | Meaning | Example |
|---|---|---|
px |
Pixel | font-size: 16px; |
cm |
Centimeters | width: 2cm; |
mm |
Millimeters | margin: 5mm; |
in |
Inch | height: 2in; |
pt |
Stamps (1/72 inch) | font-size: 12pt; |
pc |
Typographical pica (1pc = 12pt) | width: 2pc; |
💡 Note: On the web, px is the most common absolute unit; the others are rarely used due to screen differences.
2.2. Units Related to font size
They depend on the font-size of the element or its container.
| Unity | Meaning | Example |
|---|---|---|
em |
Relative to the font-size of the element |
padding: 2em; |
rem |
Relative to the font-size of the root element (html) |
font-size: 1.2rem; |
ex |
Height of the letter “x” | line-height: 2ex; |
ch |
Width of character "0" | width: 40ch; |
💡 Practical note: use rem for global consistency, em for locally proportioned spaces.
2.3. Viewport-Relative Units
Depends on the size of the browser window.
| Units | Meaning | Example |
|---|---|---|
vw |
1% of viewport width | width: 50vw; |
vh |
1% of the viewport height | height: 100vh; |
vmin |
Percentage of the smaller side | font-size: 2vmin; |
vmax |
Percentage of the longest side | font-size: 2vmax; |
svw / svh |
Small Viewport | - |
lvw / lvh |
Large Viewport | - |
dvw / dvh |
Dynamic Viewport | - |
2.4. Percentage Units
Relative to a property and the container. Example: width: 50%; = half the width of the container.
⚠️ Warning: height: 100% only works if the container has a defined height.
3. Time and Angle Units
Used for animations and transformations.
| Type | Unit | Example |
|---|---|---|
| Time | s (seconds), ms (milliseconds) |
transition: 0.3s; |
| Angles | deg, rad, grad, turn |
transform: rotate(45deg); |
4. Practical Tips
- Prefer relative units (
rem,%,vw,vh) for responsive designs. - Use
pxonly when you need to set precise dimensions. - Combine different units for flexible effects (
calc()). - Test on different screens to avoid readability issues.
5. Useful references
Follow me #techelopment
Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment
