The <length-percentage> CSS data type represents a value that can be either a  <length> or a <percentage>.


Refer to the documentation for <length> and <percentage> for details of the individual syntaxes allowed by this type.

Use in calc()

Where a length-percentage> is specified as an allowable type, this means that the percentage resolves to a length and therefore can be used in a calc() expression. Therefore all of the following values are acceptable for width:

width: 200px
width: 20%
width: calc(100% - 200px)


Specification Status Comment
CSS Values and Units Module Level 4
The definition of '<length-percentage>' in that specification.
Editor's Draft  
CSS Values and Units Module Level 3
The definition of '<length-percentage>' in that specification.
Candidate Recommendation Defines <length-percentage>. Adds calc()

Browser compatibility

No compatibility data found. Please contribute data for "css.types.length-percentage" (depth: 1) to the MDN compatibility data repository.

Document Tags and Contributors

Contributors to this page: mdnwebdocs-bot, chrisdavidmills, rachelandrew
Last updated by: mdnwebdocs-bot,