Web/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%;
}

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 4The definition of '<length-percentage>' in that specification.	Editor's Draft
CSS Values and Units Module Level 3The 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.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
<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 Notes' Full support 1 Notes' Notes' From Firefox 1 to Firefox 3, ch was the width of the M character. Notes' From Firefox 1 to Firefox 3, ch did not work with border-width and outline-width CSS properties.	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 Non-standard'	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 Notes' Full support 19 Notes' Notes' Starting with version 21, viewport-percentage lengths are invalid in @page.	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 Notes' Full support 19 Notes' Notes' Starting with version 21, viewport-percentage lengths are invalid in @page.	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 Full support 12 Full support 12 Alternate Name' Alternate Name' Uses the non-standard name: vm	Firefox Full support 19 Notes' Full support 19 Notes' Notes' Starting with version 21, viewport-percentage lengths are invalid in @page.	IE Full support 10 Full support 10 Full support 9 Alternate Name' Alternate Name' Uses the non-standard name: vm	Opera Full support 15	Safari Full support 6.1	WebView Android Full support ≤37	Chrome Android Full support 26	Firefox Android Full support 19 Notes' Full support 19 Notes' Notes' Starting with version 21, viewport-percentage lengths are invalid in @page.	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 Notes' Full support 19 Notes' Notes' Starting with version 21, viewport-percentage lengths are invalid in @page.	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 Notes' Full support 19 Notes' Notes' Starting with version 21, viewport-percentage lengths are invalid in @page.	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.

<length-percentage> by Mozilla Contributors is licensed under CC-BY-SA 2.5.