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.

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 compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
<length-percentage> 1 12 1 3 3.5 1
Q unit 63 79 49 No 50 No
cap unit No No No No No No
ch unit 27 12 1
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
ex unit 1 12 1 4 3.5 1
ic unit No No No No No No
lh unit No No No No No No
mozmm unit No No 4 — 59 No No No
rem unit 4 12 3.6 9 11.6 5
rlh unit No No No No No No
vb unit No No No No No No
vh unit 20 12 19 9 20 6
vi unit No No No No No No
vmax unit 26 16 19
19
Starting with version 21, viewport-percentage lengths are invalid in @page.
No 15 6.1
vmin unit 26 12
12
12
Uses the non-standard name: vm
19
19
Starting with version 21, viewport-percentage lengths are invalid in @page.
10
10
9
Uses the non-standard name: vm
15 6.1
vw unit 20 12 19
19
Starting with version 21, viewport-percentage lengths are invalid in @page.
9 20 6
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
<length-percentage> ≤37 18 4 10.1 1 1.0
Q unit 63 63 49 46 No 8.0
cap unit No No No No No No
ch unit ≤37 27 4 14 7 1.5
ex unit 1 18 4 10.1 1 1.0
ic unit No No No No No No
lh unit No No No No No No
mozmm unit No No 4 — 59 No No No
rem unit 2 18 4 12 4 1.0
rlh unit No No No No No No
vb unit No No No No No No
vh unit ≤37 25 19 14 6 1.5
vi unit No No No No No No
vmax unit 1.5 26 19
19
Starting with version 21, viewport-percentage lengths are invalid in @page.
14 6.1 1.5
vmin unit ≤37 26 19
19
Starting with version 21, viewport-percentage lengths are invalid in @page.
14 6.1 1.5
vw unit ≤37 25 19
19
Starting with version 21, viewport-percentage lengths are invalid in @page.
14 6 1.5

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/length-percentage