About Lesson
CSS Units Tutorial
1. Absolute Units:
| Unit | Description | Example Usage |
|---|---|---|
| px | Pixels (It represents a single point of light on a display screen and provides a fixed, device-dependent measurement). A pixel on a high-resolution display will be smaller and denser compared to a pixel on a lower-resolution display. When aiming for consistent and responsive designs across various devices and screen resolutions, relative units like percentages or viewport-based units are often utilized. |
width: 200px; |
| in | Inches | margin: 1in; |
| cm | Centimeters | padding: 2cm; |
| mm | Millimeters | font-size: 10mm; |
| pt | Points | line-height: 12pt; |
| pc | Picas | height: 3pc; |
2. Relative Units:
| Unit | Description | Example Usage |
|---|---|---|
| % | Percentages (relative to the size of the parent element). When you specify a length or size using percentages, you are setting it relative to the size of the parent element. For example, width: 50%; sets the width ofan element to be 50% of the width of its parent element. |
width: 50%; |
| em | Relative to the font size of the parent element. It is based on the font size of the parent element or the element itself if no parent font size is specified. |
font-size: 1.2em; |
| rem | Relative to the root element’s font size | margin: 2rem; |
| vw | Relative to the viewport width | width: 25vw; |
| vh | Relative to the viewport height | height: 75vh; |
| vmin | Relative to the smaller viewport dimension (width or height) | padding: 2vmin; |
| vmax | Relative to the larger viewport dimension (width or height) | width: 50vmax; |
3. Viewport-based Units:
| Unit | Description | Example Usage |
|---|---|---|
| vw | Relative to the viewport width | width: 50vw; |
| vh | Relative to the viewport height | height: 30vh; |
| vmin | Relative to the smaller viewport dimension (width or height) | margin: 2vmin; |
| vmax | Relative to the larger viewport dimension (width or height) | padding: 3vmax; |
4. Font-relative Units:
| Unit | Description | Example Usage |
|---|---|---|
| ex | Relative to the x-height of the current font | line-height: 2ex; |
| ch | Relative to the width of the “0” character in the current font | width: 20ch; |