Length Units
suggest changeIntroduction
A CSS distance measurement is a number immediately followed by a length unit (px, em, pc, in, …)
CSS supports a number of length measurements units. They are absolute or relative.
Syntax
- valueunit
- 1em
Parameters
Unit | Description | –– | ———– | % | Define sizes in terms of parent objects or current object dependent on property | em | Relative to the font-size of the element (2em means 2 times the size of the current font) | rem | Relative to font-size of the root element |
|vw |Relative to 1% of the width of the viewport*| |vh | Relative to 1% of the height of the viewport*| |vmin | Relative to 1% of viewport’s* smaller dimension| |vmax | Relative to 1% of viewport’s* larger dimension| | cm | centimeters | | mm | millimeters | | in | inches (1in = 96px = 2.54cm) | | px | pixels (1px = 1/96th of 1in) | | pt | points (1pt = 1/72 of 1in) | | pc | picas (1pc = 12 pt) | | s | seconds (used for animations and transitions) | | ms | milliseconds (used for animations and transitions) | | ex | Relative to the x-height of the current font | | ch | Based on the width of the zero (0) character | | fr | fractional unit (used for CSS Grid Layout) |
Remarks
- A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted.
- For some CSS properties, negative lengths are allowed.