Units
Anonymous contributor
Published Jul 27, 2021Updated Sep 9, 2021
Contribute to Docs
CSS uses units to measure the values of various properties in a stylesheet. The two main types of units are absolute units and relative units.
Absolute Units
Absolute units are CSS units that are of fixed lengths and not relative to any other styles. This includes:
px
: Pixels (most common)pt
: Pointsmm
: Millimeters
Relative Units
Relative units are CSS units whose size is relative to some other length. They could relate to things like:
- The font-size of a direct parent element
- The default font-size of the HTML body
- The size of the viewport
Some common relative units include:
em
: Property size relative to property size of direct parent element (most common)rem
: Property size relative to property size of direct root elementvw
: Percentage based on width of screenvh
: Percentage based on height of screen
Syntax
<length>: <length-unit>;
- A
<length>
is any measurable property, such asborder
,background-color
, andmargin
. - A
<length-unit>
is the value assigned to a measurable property, such as2px
,30em
, and10pt
.
Example
border-width: 30px;
This sets the border-width
to 30 pixels.
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.