Home >> Tutorials/FAQs >> CSS Tutorials >> Index

CSS Tutorials - Length Units Used in CSS

By: FYICenter.com

(Continued from previous topic...)

What Are the Length Units Used in CSS?

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:

<p>Length Units Test by FYICenter.com:</p>
<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>

(Continued on next topic...)

  1. What Needs To Be Considered When Designing Page Layout?
  2. What Is Screen Resolution?
  3. What Is Browser Resolution?
  4. How To Test Browser Resolutions?
  5. How Wide Do You Want Your Page Content to Be?
  6. What Are the Page Widths on Popular Websites?
  7. What Are the Length Units Used in CSS?
  8. How To Set Page Width Relative To the Browser Width?
  9. How To Set Page Width to a Fixed Value?
  10. How To Center Your Page in Browser Windows?
  11. What Happen to Images with Absolute Page Width Units?
  12. How To Set Page Widths to Relative Length Units?
  13. What Happen to Font Sizes with Relative Page Width Units?
  14. How To Set Font Sizes to Relative Length Units?
  15. What Are the Background Style Properties?
  16. How To Specify a Background Image?
  17. How To Position Background Images?
  18. How To Specify Two Background Images on a Page?

Selected Developer Jobs: