# % unit

The `%` relative unit sets a size of a child element relative to the size of its parent. For example, the width of a rectangle equal to `50%` means that it is half the size of its parent.

## Example

Let's give the child element's rectangle a width of `20%` and a height of `40%`:

`<div> <p></p> </div>` `div { border: 1px solid black; width: 200px; height: 100px; } p { border: 1px solid red; width: 20%; height: 40%; }`

:

## See also

- the `px` unit
  that specifies a size in pixels
- the `fr` unit
  that specifies a size in fr
- the `em` unit
  that specifies a size in em
- the `rem` unit
  that specifies a size in rem
- the `vw` unit
  that specifies a size in vw
- the `vh` unit
  that specifies a size in vh
- the `vmax` unit
  that specifies a size in vmax
- the `vmin` unit
  that specifies a size in vmin

← →
↑
en ru