CSS Length Units
There are two kinds of units that can be applied to lengths in CSS. They are
- Absolute
- Relative
Absolute Length Units
| Unit | Description | Example |
|---|---|---|
| cm | centimeters | font-size: 1cm; |
| mm | millimeters | font-size: 5mm; |
| in | inches (1in = 96px = 2.54cm) | font-size: 0.4in; |
| px * | pixels (1px = 1/96th of 1in) | font-size: 12px; |
| pt | points (1pt = 1/72 of 1in) | font-size: 5pt; |
| pc | picas (1pc = 12 pt) | font-size: 1pt; |
Relative Length Units
| Unit | Description | Example |
|---|---|---|
| em | Relative to the font-size of the element (2em means 2 times the size of the current font) | font-size: 2em; |
| ex | Relative to the x-height of the current font (rarely used) | font-size: 3ex; |
| ch | Relative to the width of the “0” (zero) | font-size: 3ch; |
| rem | Relative to font-size of the root element | font-size: 2.5rem; |
| vw | Relative to 1% of the width of the viewport* | font-size: 3vw; |
| vh | Relative to 1% of the height of the viewport* | font-size: 2.5vh; |
| vmin | Relative to 1% of viewport’s* smaller dimension | font-size: 5vmin; |
| vmax | Relative to 1% of viewport’s* larger dimension | font-size: 1vmax; |
| % | Relative to the parent element | font-size: 3%; |
Example for Absolute Length Units
In the following example, we set font-size for paragraphs with each of the absolute length units.
index.html
Example for Relative Length Units
In the following example, we set font-size for paragraphs with each of the relative length units.
index.html
Conclusion
In this CSS Tutorial, we learned about length units in CSS, with examples.