W3cubDocs

/CSS

<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.

Formal syntax

<length-percentage> = 
<length> |
<percentage>

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

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
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
NoSee bug 937101.
NoSee bug 937101.
97 No
NoSee bug 937101.
NoSee bug 195176.
NoSee bug 937101.
NoSee bug 937101.
97
NoSee bug 937101.
NoSee bug 195176.
NoSee bug 937101.
lh
NoSee bug 937104.
NoSee bug 937104.
NoSee bug 1310170.
No
NoSee bug 937104.
16.4
NoSee bug 937104.
NoSee bug 937104.
NoSee bug 1310170.
NoSee bug 937104.
16.4
NoSee 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
NoSee bug 937104.
NoSee bug 937104.
NoSee bug 1310170.
No
NoSee bug 937104.
16.4
NoSee bug 937104.
NoSee bug 937104.
NoSee bug 1310170.
NoSee bug 937104.
16.4
NoSee bug 937104.
vb No No
NoSee bug 1287034.
No No
NoSee bug 159801.
No No
NoSee bug 1287034.
No
NoSee bug 159801.
No
vh 20 12 19 9 20 6 4.4 25 19 14 6 1.5
vi No No
NoSee bug 1287034.
No No
NoSee bug 159801.
No No
NoSee bug 1287034.
No
NoSee bug 159801.
No
vmax 26 16
19Starting with version 21, viewport-percentage lengths are invalid in @page.
No 15 7 1.5 26
19Starting with version 21, viewport-percentage lengths are invalid in @page.
14 7 1.5
vmin 26 1212
19Starting with version 21, viewport-percentage lengths are invalid in @page.
109 15 7 4.4 26
19Starting with version 21, viewport-percentage lengths are invalid in @page.
14 7 1.5
vw 20 12
19Starting with version 21, viewport-percentage lengths are invalid in @page.
9 20 6 4.4 25
19Starting with version 21, viewport-percentage lengths are invalid in @page.
14 6 1.5

See also

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