-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
66 lines (44 loc) · 2.23 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
---
title: <percentage>
slug: Web/CSS/percentage
page-type: css-type
browser-compat: css.types.percentage
---
{{CSSRef}}
The **`<percentage>`** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a percentage value. It is often used to define a size as relative to an element's parent object. Numerous properties can use percentages, such as {{CSSxRef("width")}}, {{CSSxRef("height")}}, {{CSSxRef("margin")}}, {{CSSxRef("padding")}}, and {{CSSxRef("font-size")}}.
> **Note:** Only calculated values can be inherited. Thus, even if a percentage value is used on the parent property, a real value (such as a width in pixels for a {{CSSxRef("<length>")}} value) will be accessible on the inherited property, not the percentage value.
## Syntax
The `<percentage>` data type consists of a {{CSSxRef("<number>")}} followed by the percentage sign (`%`). Optionally, it may be preceded by a single `+` or `-` sign, although negative values are not valid for all properties. As with all CSS dimensions, there is no space between the symbol and the number.
## Interpolation
When animated, values of the `<percentage>` data type are {{Glossary("interpolation", "interpolated")}} as real, floating-point numbers. The speed of the interpolation is determined by the [easing function](/en-US/docs/Web/CSS/easing-function) associated with the animation.
## Examples
### Width and margin-left
```html
<div style="background-color:navy;">
<div style="width:50%; margin-left:20%; background-color:chartreuse;">
Width: 50%, Left margin: 20%
</div>
<div style="width:30%; margin-left:60%; background-color:pink;">
Width: 30%, Left margin: 60%
</div>
</div>
```
The above HTML will output:
{{EmbedLiveSample('Width_and_margin-left', '600', 140)}}
### Font-size
```html
<div style="font-size:18px;">
<p>Full-size text (18px)</p>
<p><span style="font-size:50%;">50% (9px)</span></p>
<p><span style="font-size:200%;">200% (36px)</span></p>
</div>
```
The above HTML will output:
{{EmbedLiveSample('Font-size', 'auto', 160)}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- {{cssxref("<length-percentage>")}}
- [CSS Values and Units](/en-US/docs/Web/CSS/CSS_Values_and_Units)