<percentage>

  • Revision slug: CSS/percentage
  • Revision title: percentage
  • Revision id: 69292
  • Created:
  • Creator: gregtyler
  • Is current revision? No
  • Comment no changes

Revision Content

{{ CSSRef() }}

Summary

Many CSS properties can take percentage values, often to define sizes in terms of parent objects. Percentages always lie between 0 and 100 and should be followed by the percentage sign "%". Many length properties use percentages, such as {{ Cssxref("width") }}, {{ Cssxref("margin") }} and {{ Cssxref("padding") }}. Percentages can also be seen in {{ Cssxref("font-size") }}, where the size of the text is directly related to the size of its parent.

Examples

<div style="background-color:#0000FF;">
  <div style="width:50%;margin-left:20%;background-color:#00FF00;">Width: 50%, Left margin: 20%</div>
  <div style="width:30%;margin-left:60%;background-color:#FF0000;">Width: 30%, Left margin: 60%</div>
</div> 

The above HTML will output:

Width: 50%, Left margin: 20%
Width: 30%, Left margin: 60%

 

<div style="font-size:18px;">
  Full size text (18px)
  <span style="font-size:50%;">50%</span>
  <span style="font-size:200%;">200%</span>
</div> 

The above HTML will output:

Full size text (18px) 50% 200%

Specifications

See also

{{ languages( { "fr": "fr/CSS/pourcentage" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>Many <a href="/en/CSS_Reference" title="en/CSS_Reference">CSS properties</a> can take percentage values, often to define sizes in terms of parent objects. Percentages always lie between 0 and 100 and should be followed by the percentage sign "%". Many length properties use percentages, such as {{ Cssxref("width") }}, {{ Cssxref("margin") }} and {{ Cssxref("padding") }}. Percentages can also be seen in {{ Cssxref("font-size") }}, where the size of the text is directly related to the size of its parent.</p>
<h3>Examples</h3>
<pre class="script">&lt;div style="background-color:#0000FF;"&gt;
  &lt;div style="width:50%;margin-left:20%;background-color:#00FF00;"&gt;Width: 50%, Left margin: 20%&lt;/div&gt;
  &lt;div style="width:30%;margin-left:60%;background-color:#FF0000;"&gt;Width: 30%, Left margin: 60%&lt;/div&gt;
&lt;/div&gt; 
</pre>
<p>The above HTML will output:</p>
<div style="background-color:#0000FF;">
<div style="width:50%;margin-left:20%;background-color:#00FF00;">Width: 50%, Left margin: 20%</div>
<div style="width:30%;margin-left:60%;background-color:#FF0000;">Width: 30%, Left margin: 60%</div>
</div>
<p> </p>
<pre class="script">&lt;div style="font-size:18px;"&gt;
  Full size text (18px)
  &lt;span style="font-size:50%;"&gt;50%&lt;/span&gt;
  &lt;span style="font-size:200%;"&gt;200%&lt;/span&gt;
&lt;/div&gt; 
</pre>
<p>The above HTML will output:</p>
<div style="font-size:18px;">Full size text (18px) <span style="font-size:50%">50%</span> <span style="font-size:200%">200%</span></div><h3 name="Specifications">Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS2/syndata.html#percentage-units">CSS 2.1</a></li>
</ul>
<h3 name="See_also">See also</h3> <p>{{ languages( { "fr": "fr/CSS/pourcentage" } ) }}</p>
Revert to this revision