Revision 40908 of <length>

  • Revision slug: CSS/length
  • Revision title: length
  • Revision id: 40908
  • Created:
  • Creator: DBaron
  • Is current revision? No
  • Comment

Revision Content

{{template.CSSRef()}}

Summary

Many CSS properties take length values, such as {{template.Cssxref("width")}}, {{template.Cssxref("margin-top")}}, and {{template.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 {{template.Cssxref("font-size")}} of the element.
ex 
The x-height of the element's {{template.Cssxref("font")}}.
px 
For screen display, one pixel (dot) of of the display. For very high resolution screens and for printers, multiple pixels, so that the number of pixels 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.

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

See also

Revision Source

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Summary"> Summary </h3>
<p>Many <a href="en/CSS_Reference">CSS properties</a> take length values, such as {{template.Cssxref("width")}}, {{template.Cssxref("margin-top")}}, and {{template.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 <b>forbidden</b>.
</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 {{template.Cssxref("font-size")}} of the element.
</dd><dt> ex </dt><dd> The x-height of the element's {{template.Cssxref("font")}}.
</dd><dt> px </dt><dd> For screen display, one pixel (dot) of of the display.  For very high resolution screens and for printers, multiple pixels, so that the number of pixels 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></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>
<h3 name="See_also"> See also </h3>
Revert to this revision