css / latest / length-percentage.html /

<length-percentage>

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
CSS Values and Units Module Level 5
# mixed-percentages

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
length-percentage
1
12
1
3
3.5
1
≤37
18
4
10.1
1
1.0
Q
63
79
49
No
50
No
63
63
49
46
No
8.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
20
7
≤37
27
4
14
7
1.5
ex
1
12
1
4
3.5
1
1
18
4
10.1
1
1.0
ic
No
See bug 937101.
No
97
No
No
No
See bug 195176.
No
No
See bug 937101.
97
No
No
No
lh
No
See bug 937104.
No
No
No
No
No
No
No
No
No
No
No
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
No
No
No
No
No
No
No
No
No
No
vb
No
No
No
No
No
No
See bug 159801.
No
No
No
No
No
No
vh
20
12
19
9
20
6
≤37
25
19
14
6
1.5
vi
No
No
No
No
No
No
See bug 159801.
No
No
No
No
No
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
≤37
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
≤37
25
19
Starting with version 21, viewport-percentage lengths are invalid in @page.
14
6
1.5

See also

© 2005–2021 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

Name CSS
Version
Badge
Last Updated 2022-04-27T17:24:15Z