mozilla

Revision 466495 of Units

  • Revision slug: CSS-2_Quick_Reference/Units
  • Revision title: Units
  • Revision id: 466495
  • Created:
  • Creator: roryokane
  • Is current revision? No
  • Comment add link to relevant spec, plus a link to the CSS3 spec because there is no CSS3 page on the topic of units

Revision Content

{{ Outdated() }}

Length

Relative length units : em, ex, px

  • em : 1 em is equivalent to the font-size (the height of the font)
  • ex : 1 ex is equivalent to the x-height of the font
  • px : Pixel
  • ch : 1 ch is equivalent to the width of the character "0" in the current font {{ gecko_minversion_inline("1.9.1") }}

Absolute length units : in, cm, mm, pt, pc

  • in : Inch
  • cm : Centimeter
  • mm : Millimeter
  • pt : Point
  • pc : Pica

{{ h1_gecko_minversion("CSS units and dots-per-inch", "2.0") }}

Starting in Gecko 2.0, changes to how CSS units translate to dots-per-inch (DPI) have been made to become consistent with the behavior of other popular browsers including Safari, Internet Explorer, and Google Chrome.

Some specific examples:

  • 1in is now always 96px
  • 3pt is now always 4px
  • 25.4mm is now always 96px

In addition, Gecko has improved ability to correctly scale absolute lengths to the actual resolution of the rendering medium, whether that's the screen or paper.

Color units : #336699, #fa5, rgb(127,255,0), rgb(40%,50%,60%)

  • #306090 : Red is 30 hex, green is 60 hex, blue is 90 hex.
  • #fa5 : Red is FF hex, green is AA hex, blue is 55 hex.
  • rgb(127,255,0) : Red is 127, green is 255, blue is 0.
  • rgb(40%,50%,60%) : Red is 40%, green is 50%, blue is 60%.

Revision Source

<p>{{ Outdated() }}</p>
<h2 id="Length">Length</h2>
<ul>
  <li><a href="http://www.w3.org/TR/CSS2/syndata.html#length-units" title="http://www.w3.org/TR/CSS2/syndata.html#length-units">Description of length units in the CSS2 spec</a></li>
  <li><a href="http://www.w3.org/TR/css3-values/#lengths" title="http://www.w3.org/TR/css3-values/#lengths">Description of length units in the CSS3 spec</a></li>
</ul>
<h3 id="Relative_length_units.C2.A0.3A_em.2C_ex.2C_px">Relative length units&nbsp;: em, ex, px</h3>
<ul>
  <li>em&nbsp;: 1 em is equivalent to the font-size (the height of the font)</li>
  <li>ex&nbsp;: 1 ex is equivalent to the x-height of the font</li>
  <li>px&nbsp;: Pixel</li>
  <li>ch : 1 ch is equivalent to the width of the character "0" in the current font {{ gecko_minversion_inline("1.9.1") }}</li>
</ul>
<h3 id="Absolute_length_units.C2.A0.3A_in.2C_cm.2C_mm.2C_pt.2C_pc">Absolute length units&nbsp;: in, cm, mm, pt, pc</h3>
<ul>
  <li>in&nbsp;: Inch</li>
  <li>cm&nbsp;: Centimeter</li>
  <li>mm&nbsp;: Millimeter</li>
  <li>pt&nbsp;: Point</li>
  <li>pc&nbsp;: Pica</li>
</ul>
<p>{{ h1_gecko_minversion("CSS&nbsp;units and dots-per-inch", "2.0") }}</p>
<p>Starting in&nbsp;Gecko 2.0, changes to how CSS units translate to dots-per-inch (DPI) have been made to become consistent with the behavior of other popular browsers including Safari, Internet Explorer, and Google Chrome.</p>
<p>Some specific examples:</p>
<ul>
  <li>1in is now always 96px</li>
  <li>3pt is now always 4px</li>
  <li>25.4mm is now always 96px</li>
</ul>
<p>In addition, Gecko has improved ability to correctly scale absolute lengths to the actual resolution of the rendering medium, whether that's the screen or paper.</p>
<h2 id="Color_units.C2.A0.3A_.23336699.2C_.23fa5.2C_rgb(127.2C255.2C0).2C_rgb(40.25.2C50.25.2C60.25)">Color units&nbsp;: #336699, #fa5, rgb(127,255,0), rgb(40%,50%,60%)</h2>
<ul>
  <li>#306090&nbsp;: Red is 30 hex, green is 60 hex, blue is 90 hex.</li>
  <li>#fa5&nbsp;: Red is FF hex, green is AA hex, blue is 55 hex.</li>
  <li>rgb(127,255,0)&nbsp;: Red is 127, green is 255, blue is 0.</li>
  <li>rgb(40%,50%,60%)&nbsp;: Red is 40%, green is 50%, blue is 60%.</li>
</ul>
Revert to this revision