The <length-percentage>
CSS data type represents a value that can be either a <length>
or a <percentage>
.
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.
<length-percentage> =
<length> |
<percentage>
The following simple example demonstrates several properties that use <length-percentage>
values.
<p>You can use percentages and lengths in so many places.</p>
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%; }
Specification |
---|
CSS Values and Units Module Level 5 # mixed-percentages |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
Q |
63 |
79 |
49 |
No |
50 |
No |
63 |
63 |
49 |
46 |
No |
8.0 |
length-percentage |
1 |
12 |
1 |
3 |
3.5 |
1 |
≤37 |
18 |
4 |
10.1 |
1 |
1.0 |
cap |
No |
No |
97 |
No |
No |
No |
No |
No |
97 |
No |
No |
No |
ch |
27 |
12 |
1
["From Firefox 1 to Firefox 3,
ch was the width of the M character.", "From Firefox 1 to Firefox 3, ch did not work with border-width and outline-width CSS properties."] |
9 |
15 |
7 |
4.4 |
27 |
4 |
15 |
7 |
1.5 |
ex |
1 |
12 |
1 |
4 |
3.5 |
1 |
4.4 |
18 |
4 |
10.1 |
1 |
1.0 |
ic |
No
See bug 937101.
|
No
See bug 937101.
|
97 |
No |
No
See bug 937101.
|
No
See bug 195176.
|
No
See bug 937101.
|
No
See bug 937101.
|
97 |
No
See bug 937101.
|
No
See bug 195176.
|
No
See bug 937101.
|
lh |
No
See bug 937104.
|
No
See bug 937104.
|
No
See bug 1310170.
|
No |
No
See bug 937104.
|
No |
No
See bug 937104.
|
No
See bug 937104.
|
No
See bug 1310170.
|
No
See bug 937104.
|
No |
No
See bug 937104.
|
mozmm |
No |
No |
4-59 |
No |
No |
No |
No |
No |
4-59 |
No |
No |
No |
rem |
4 |
12 |
3.6 |
9 |
11.6 |
5 |
2 |
18 |
4 |
12 |
4 |
1.0 |
rlh |
No
See bug 937104.
|
No
See bug 937104.
|
No
See bug 1310170.
|
No |
No
See bug 937104.
|
No |
No
See bug 937104.
|
No
See bug 937104.
|
No
See bug 1310170.
|
No
See bug 937104.
|
No |
No
See bug 937104.
|
vb |
No |
No |
No
See bug 1287034.
|
No |
No |
No
See bug 159801.
|
No |
No |
No
See bug 1287034.
|
No |
No
See bug 159801.
|
No |
vh |
20 |
12 |
19 |
9 |
20 |
6 |
4.4 |
25 |
19 |
14 |
6 |
1.5 |
vi |
No |
No |
No
See bug 1287034.
|
No |
No |
No
See bug 159801.
|
No |
No |
No
See bug 1287034.
|
No |
No
See bug 159801.
|
No |
vmax |
26 |
16 |
19
Starting with version 21, viewport-percentage lengths are invalid in
@page . |
No |
15 |
7 |
1.5 |
26 |
19
Starting with version 21, viewport-percentage lengths are invalid in
@page . |
14 |
7 |
1.5 |
vmin |
26 |
12
12
|
19
Starting with version 21, viewport-percentage lengths are invalid in
@page . |
10
9
|
15 |
7 |
4.4 |
26 |
19
Starting with version 21, viewport-percentage lengths are invalid in
@page . |
14 |
7 |
1.5 |
vw |
20 |
12 |
19
Starting with version 21, viewport-percentage lengths are invalid in
@page . |
9 |
20 |
6 |
4.4 |
25 |
19
Starting with version 21, viewport-percentage lengths are invalid in
@page . |
14 |
6 |
1.5 |
© 2005–2022 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/length-percentage