mozilla

Compare Revisions

<percentage>

Change Revisions

Revision 69289:

Revision 69289 by myakura on

Revision 69290:

Revision 69290 by gregtyler on

Title:
percentage
percentage
Slug:
CSS/percentage
CSS/percentage
Tags:
css, "CSS Reference"
css, "CSS Reference"
Content:

Revision 69289
Revision 69290
n14      Many <a href="en/CSS_Reference">CSS properties</a> take pern14      Many <a href="/en/CSS_Reference" title="en/CSS_Reference">C
>centage values, such as {{ Cssxref("width") }}, {{ Cssxref("margi>SS properties</a> can take percentage values, often to define siz
>n-top") }}, and {{ Cssxref("font-size") }}. The CSS syntax for pe>es in terms of parent objects. Percentages always lie between 0 a
>rcentage is a number followed immediately by a&nbsp;% (percentage>nd 100 and should be followed by the percentage sign "%". Many le
> sign).>ngth properties use percentages, such as {{ Cssxref("width") }}, 
 >{{ Cssxref("margin") }} and {{ Cssxref("padding") }}. Percentages
 > can also be seen in {{ Cssxref("font-size") }}, where the size o
 >f the text is directly related to the size of its parent.
n16    <h3 name="Examples">n16    <h3>
n19    <h3 name="Notes">n19    <pre class="script">
20      Notes20&lt;div style="background-color:#0000FF;"&gt;
21  &lt;div style="width:50%;margin-left:20%;background-color:#00FF
 >00;"&gt;Width: 50%, Left margin: 20%&lt;/div&gt;
22  &lt;div style="width:30%;margin-left:60%;background-color:#FF00
 >00;"&gt;Width: 30%, Left margin: 60%&lt;/div&gt;
23&lt;/div&gt; 
24</pre>
25    <p>
26      The above HTML will output:
21    </h3>27    </p>
28    <div style="background-color:#0000FF;">
29      <div style="width:50%;margin-left:20%;background-color:#00F
 >F00;">
30        Width: 50%, Left margin: 20%
31      </div>
32      <div style="width:30%;margin-left:60%;background-color:#FF0
 >000;">
33        Width: 30%, Left margin: 60%
34      </div>
35    </div>
36    <p>
37      &nbsp;
38    </p>
39    <pre class="script">
40&lt;div style="font-size:18px;"&gt;
41  Full size text (18px)
42  &lt;span style="font-size:50%;"&gt;50%&lt;/span&gt;
43  &lt;span style="font-size:200%;"&gt;200%&lt;/span&gt;
44&lt;/div&gt; 
45</pre>
46    <p>
47      The above HTML will output:
48    </p>
49    <div style="font-size:18px;">
50      Full size text (18px) <span style="font-size:50%">50%</span
 >> <span style="font-size:200%">200%</span>
51    </div>
n30    <h3 name="Browser_compatibility">n
31      Browser compatibility
32    </h3>
tt63    <p>
36    <div class="noinclude"></div>{{ languages( { "fr": "fr/CSS/po64      {{ languages( { "fr": "fr/CSS/pourcentage" } ) }}
>urcentage" } ) }} 
65    </p>

Back to History