mozilla

Revision 40926 of <length>

  • Revision slug: CSS/length
  • Revision title: length
  • Revision id: 40926
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 31 words added, 22 words removed

Revision Content

{{ CSSRef() }}

Summary

Many CSS properties take length values, such as {{ Cssxref("width") }}, {{ Cssxref("margin-top") }}, and {{ Cssxref("font-size") }}.

The CSS syntax for lengths is a number followed immediately by a unit. Having a space between the number an the unit is forbidden.

For some properties, using negative lengths is a syntax error, but for some properties, negative lengths are allowed.

Units

em
The {{ Cssxref("font-size") }} of the element.
ex
The x-height of the element's {{ Cssxref("font") }}. This is generally the height of lowercase letters in the font.
px
For screen display, one pixel (dot) of the display. For very high resolution screens and for printers, multiple pixels, so that the number of px per inch stays around 96.
in 
One inch (which is 2.54 centimeters). For screen display, the number of pixels in an inch is determined by the system's estimate (often incorrect) of the resolution of its display.
cm 
One centimeter (which is 10 millimeters). For screen display, the number of pixels in an centimeter is determined by the system's estimate (often incorrect) of the resolution of its display.
mm 
One millimeter. For screen display, the number of pixels in an millimeter is determined by the system's estimate (often incorrect) of the resolution of its display.
pt 
One point (which is 1/72 of an inch). For screen display, the number of pixels in an point is determined by the system's estimate (often incorrect) of the resolution of its display.
pc 
One pica (which is 12 points). For screen display, the number of pixels in an pica is determined by the system's estimate (often incorrect) of the resolution of its display.
ch
{wiki.template('Non-standard_inline')}} Firefox 1 - 3.0 used the width of "M" and the unit didn't work for border-width and outline-width.
{{ fx_minversion_inline("3") }} The width of the character "0" (zero) in the current font.

Examples

Notes

The syntax for percentages (number followed by % sign) is similar to the syntax for lengths. However, percentages are not a type of length, although some of the properties that take length values also take percentage values.

Specifications

Browser compatibility

The CSS3 value ch is currently not supported by other browsers.

Browser Lowest Version with "ch" Unit Support
Internet Explorer n/a
Firefox 1.0  width of "M" {{ Non-standard_inline() }}
3.5  width of "0" (zero)
Opera n/a
Safari n/a

 

See also

{{ languages( { "es": "es/CSS/length", "fr": "fr/CSS/longueur" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>Many <a href="/en/CSS_Reference" title="en/CSS_Reference">CSS properties</a> take length values, such as {{ Cssxref("width") }}, {{ Cssxref("margin-top") }}, and {{ Cssxref("font-size") }}.</p>
<p>The CSS syntax for lengths is a number followed immediately by a unit. Having a space between the number an the unit is <strong>forbidden</strong>.</p>
<p>For some properties, using negative lengths is a syntax error, but for some properties, negative lengths are allowed.</p>
<h3 name="Units">Units</h3>
<dl><dt> em</dt><dd> The {{ Cssxref("font-size") }} of the element. </dd><dt> ex</dt><dd> The x-height of the element's {{ Cssxref("font") }}. This is generally the height of lowercase letters in the font. </dd><dt> px</dt><dd> For screen display, one pixel (dot) of the display. For very high resolution screens and for printers, multiple pixels, so that the number of <code>px</code> per inch stays around 96. </dd><dt> in </dt><dd> One inch (which is 2.54 centimeters). For screen display, the number of pixels in an inch is determined by the system's estimate (often incorrect) of the resolution of its display. </dd><dt> cm </dt><dd> One centimeter (which is 10 millimeters). For screen display, the number of pixels in an centimeter is determined by the system's estimate (often incorrect) of the resolution of its display. </dd><dt> mm </dt><dd> One millimeter. For screen display, the number of pixels in an millimeter is determined by the system's estimate (often incorrect) of the resolution of its display. </dd><dt> pt </dt><dd> One point (which is 1/72 of an inch). For screen display, the number of pixels in an point is determined by the system's estimate (often incorrect) of the resolution of its display. </dd><dt> pc </dt><dd> One pica (which is 12 points). For screen display, the number of pixels in an pica is determined by the system's estimate (often incorrect) of the resolution of its display. </dd><dt>ch<br>
</dt><dd> {wiki.template('Non-standard_inline')}} Firefox 1 - 3.0 used the width of "M" and the unit didn't work for <code>border-width</code> and <code>outline-width</code>.<br>
{{ fx_minversion_inline("3") }} The width of the character "0" (zero) in the current font.<br>
</dd></dl><h3 name="Examples">Examples</h3>
<h3 name="Notes">Notes</h3>
<p>The syntax for percentages (number followed by <code>%</code> sign) is similar to the syntax for lengths. However, percentages are not a type of length, although some of the properties that take length values also take percentage values.</p>
<h3 name="Specifications">Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/REC-CSS1#length-units">CSS 1</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#length-units">CSS 2.1</a></li> <li><a class="external" href="http://www.w3.org/TR/css3-values/#lengths">CSS3-values</a></li>
</ul>
<h3 name="Browser_compatibility">Browser compatibility</h3>
<p>The CSS3 value<code> ch </code>is currently not supported by other browsers.</p>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th colspan="2">Lowest Version with "ch" Unit Support</th> </tr> <tr> <td>Internet Explorer</td> <td>n/a</td> </tr> <tr> <td rowspan="2">Firefox</td> <td>1.0  width of "M" {{ Non-standard_inline() }}</td> </tr> <tr> <td>3.5  width of "0" (zero)</td> </tr> <tr> <td>Opera</td> <td>n/a</td> </tr> <tr> <td>Safari</td> <td>n/a</td> </tr> </tbody>
</table>
<p> </p><h3 name="See_also">See also</h3>
<p>{{ languages( { "es": "es/CSS/length", "fr": "fr/CSS/longueur" } ) }}</p>
Revert to this revision