The <length-percentage>
CSS data type represents a value that can be either a <length>
or a <percentage>
.
Syntax
Refer to the documentation for <length>
and <percentage>
for details of the individual syntaxes allowed by this type.
Examples
length-percentage examples
The following simple example demonstrates several properties that use <length-percentage>
values.
HTML
<p>You can use percentages and lengths in so many places.</p>
CSS
p { /* length-percentage examples */ width: 75%; height: 200px; margin: 3rem; padding: 1%; border-radius: 10px 10%; font-size: 250%; line-height: 1.5em; /* length examples */ text-shadow: 1px 1px 1px red; border: 5px solid red; letter-spacing: 3px; /* percentage example */ text-size-adjust: 20%; }
Result
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);
Specifications
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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
<length-percentage> | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 3 | Opera Full support 3.5 | Safari Full support 1 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Q unit | Chrome Full support 63 | Edge Full support 79 | Firefox Full support 49 | IE No support No | Opera Full support 50 | Safari No support No | WebView Android Full support 63 | Chrome Android Full support 63 | Firefox Android Full support 49 | Opera Android Full support 46 | Safari iOS No support No | Samsung Internet Android Full support 8.0 |
cap unit | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
ch unit | Chrome Full support 27 | Edge Full support 12 | Firefox
Full support
1
| IE Full support 9 | Opera Full support 20 | Safari Full support 7 | WebView Android Full support ≤37 | Chrome Android Full support 27 | Firefox Android Full support 4 | Opera Android Full support 14 | Safari iOS Full support 7 | Samsung Internet Android Full support 1.5 |
ex unit | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 4 | Opera Full support 3.5 | Safari Full support 1 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
ic unit | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
lh unit | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
mozmm unit | Chrome No support No | Edge No support No | Firefox No support 4 — 59 | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support 4 — 59 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
rem unit | Chrome Full support 4 | Edge Full support 12 | Firefox Full support 3.6 | IE Full support 9 | Opera Full support 11.6 | Safari Full support 5 | WebView Android Full support 2 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 12 | Safari iOS Full support 4 | Samsung Internet Android Full support 1.0 |
rlh unit | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
vb unit | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
vh unit | Chrome Full support 20 | Edge Full support 12 | Firefox Full support 19 | IE Full support 9 | Opera Full support 20 | Safari Full support 6 | WebView Android Full support ≤37 | Chrome Android Full support 25 | Firefox Android Full support 19 | Opera Android Full support 14 | Safari iOS Full support 6 | Samsung Internet Android Full support 1.5 |
vi unit | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
vmax unit | Chrome Full support 26 | Edge Full support 16 | Firefox
Full support
19
| IE No support No | Opera Full support 15 | Safari Full support 6.1 | WebView Android Full support 1.5 | Chrome Android Full support 26 | Firefox Android
Full support
19
| Opera Android Full support 14 | Safari iOS Full support 6.1 | Samsung Internet Android Full support 1.5 |
vmin unit | Chrome Full support 26 | Edge
Full support
12
| Firefox
Full support
19
| IE
Full support
10
| Opera Full support 15 | Safari Full support 6.1 | WebView Android Full support ≤37 | Chrome Android Full support 26 | Firefox Android
Full support
19
| Opera Android Full support 14 | Safari iOS Full support 6.1 | Samsung Internet Android Full support 1.5 |
vw unit | Chrome Full support 20 | Edge Full support 12 | Firefox
Full support
19
| IE Full support 9 | Opera Full support 20 | Safari Full support 6 | WebView Android Full support ≤37 | Chrome Android Full support 25 | Firefox Android
Full support
19
| Opera Android Full support 14 | Safari iOS Full support 6 | Samsung Internet Android Full support 1.5 |
Legend
- Full support
- Full support
- No support
- No support
- Non-standard. Expect poor cross-browser support.
- Non-standard. Expect poor cross-browser support.
- See implementation notes.
- See implementation notes.
- Uses a non-standard name.
- Uses a non-standard name.