What Are the Length Units Used in CSS

Q

What Are the Length Units Used in CSS? - CSS Tutorials - Page Layout and Background Image Design

✍: FYIcenter.com

A

To control your page width and page layout, you must understand the length units used in CSS. Here is a list of main length units:

cm - One centimeter, absolute unit.
em - The height of the current text font, relative unit.
ex - The height of the letter 'x', relative unit.
in - One inch, absolute unit. 
mm - One millimeter, absolute unit.
pc - One Pica = 12 pt, absolute unit.
pt - One point = 1/72 inch, absolute unit. 
px - One pixel of the browser resolution, relative unit.

If you want to compare those units, you can try the following file of HTML and CSS codes:

<html><body>
<p>Length Units Test by FYICenter.com:</p>
<table>
<tr><td align=right>1 cm</td>
  <td align=left><hr style="{width: 1cm}"></td></tr>
<tr><td align=right>10 em</td>
  <td align=left><hr style="{width: 10em}"></td></tr>
<tr><td align=right>10 ex</td>
  <td align=left><hr style="{width: 10ex}"></td></tr>
<tr><td align=right>1 in</td>
  <td align=left><hr style="{width: 1in}"></td></tr>
<tr><td align=right>10 mm</td>
  <td align=left><hr style="{width: 10mm}"></td></tr>
<tr><td align=right>6 pc</td>
  <td align=left><hr style="{width: 1pc}"></td></tr>
<tr><td align=right>72 pt</td>
  <td align=left><hr style="{width: 72pt}"></td></tr>
<tr><td align=right>90 px</td>
  <td align=left><hr style="{width: 90px}"></td></tr>
</table>
</body></html>

2007-05-11, 4785👍, 0💬