Questions And Answers

More Tutorials

CSS Lenght Units

A length unit determines the size of a property. Most CSS properties accept a set of datatypes containing values and units. A paragraph, for instance, has the property max-width . We can assign the property max-width a value, and the value becomes part of the length unit.

Units 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)

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.


In this page (written and validated by ) you learned about CSS Length Units . What's Next? If you are interested in completing CSS tutorial, your next topic will be learning about: CSS rems and ems.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.