# Dimensions, Sizes And Units

## Where Unit Matters

### Pixels, Percentages & More

| Units | Sign |
| --- | --- |
| pixels | px |
| percentages | % |
| root em | rem |
| em | em |
| viewport height | vh |
| viewport width | vw |

### Some questions?

Which properties can you use in connection with these units?
How is the size calculated?
What's the right unit to choose?

### Where Units Matter

Keeping the CSS box model in mind, going inside out, e.g from content to padding to border to margin. Lets see where we can apply these units.

`font-size`, `padding`, `border`, `margin`, `width`, `height`, `top`, `bottom`, `left`, `right`.


## An Overview Of Available Sizes And Units

### How is the Size Calculated?

| **Absolute Lengths** | **Viewport Lengths** | **Font-Relative Lengths** |
| --- | --- | --- |
| Mostly ignore user settings | Adjust to current viewport | Adjust to default font size |
| `px` | `vh` | `rem` |
| `cm` |  | `vw` | `em` |
| `mm` |  | `vmin` | `...` |
| `...` |  | `vmax` |  |

Also, percentage `%` is another special unit used.

### How is the Box Size for % Units Calculated?

To understand how `%` units are calculated, we first need to understand the concept of **containing blocks**.


##  Rules to Remember Fixed Positioning & `%`