# 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?

1. Which properties can you use in connection with these units?
2. How is the size calculated?
3. 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 & `%`

If an element has `position` property assigned `fixed` value, than the containing block of that element will be the **Viewport**. So the percentage `%` value of the element will be relative to the viewport's dimensions.


##  Rules to Remember `absolute` Positioning & `%`

If an element has `position` property assigned `absolute` value, than the containing block of that element will be an **Ancestor**. In this case, the percentage `%` value of the element will be relative to it's ancestor's **content + padding**. 

But the question is, what is the containing block or ancestor for this element, and the answer is, the closest ancestor with any of these properties applid: `position: absolute;`, `position: relative;`, `position: fixed;` or `position: sticky;`. Or the closest ancestor which is not positioned `static`.


##  Rules to Remember `static` Or `relative` Positioning & `%`

With position `static` or `relative`, the containing block would still be an **Ancestor**, but the % value of the element will only be relative to the ancestor's **content** and not `padding`.

The ancestor for a `static` or `relative` positioned elements will be the closest `block` level element.


## Using `min-width/height` And `max-width/height` 

To restrict the minimum or maximum size of the elements. e.g. the following rule will make the element have `65%` width of the containing block, unless it is larger than `500px` pixels, in that case it will not grow larger than that.

```css
.image {
    width: 65%;
    max-width: 500px;
}
```


## Working With `rem` And `em`

`rem` and `em` are relative units which are calculated based on the font size inherited from a container or browser. e.g setting a `font-size: 20px` for a continer and `font-size: 2em` for an element in that container will make that element have `font-size` `40px` in pixels, because `2em` means 2 times the size inherited.

The issue with `em` is it multiplies the `font-size` everytime there's a `font-size` defined in it's chain of inheritance. 

To avoid the issue with the `em` unit, we can use `rem`, which only multiplies it with the `font-size` defined in the root element of our website, that is the `html` element. 


## Adding `rem` To Additional Properties

We can apply the `rem` unit to other elements or as `margin` and `padding`, e.g. we can set `margin-top: 2rem;`, but keep in mind that the margin will increase or decrease with the change in `font-size`.


## Understanding the Viewport Units `vh` And `vw`

The viewport units allows us the set our sized relative to the actual *Viewport* size. e.g. `width: 80vw;` will set the element's width to 80 percent of the viewports actual width.

Another units that set the sizes relative to viewport's actual size are `vmin` and `vmax`, which selects the minimum or maximum value from viewport's width and height.


## Choosing The Right Unit

The following list for choosing the right unit for a property, is not a definit guide, but a preference of an experienced developer:

| Property | "Recommended" Unit |
| --- | --- |
| `font-size` (root element) | `%` |
| `font-size` | `rem` |
| `padding` & `margin` | `rem` |
| `border` | `px` |
| `width` & `height` | `%,` `vw`, `vh` |
| `top` & `bottom` | `%` |
| `left` & `right` | `%` |


## Using `auto` To Center Elements

As we have already seen, using the `margin: auto;` centers elements in it's container. `margin: auto;` only works for block level elements with an explicitly assigned `width` though.