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, 5255👍, 0💬

What Happen to Images with Absolute Page Width Units
What Happen to Images with Absolute Page Width Units? - CSS Tutorials - Page Layout and Background Image Design If you set your page width to absolute length units like inches, what will happen to image sizes? Usually, images have relative length units like pixels. If you include large images on you... 2007-05-11, 5819👍, 0💬

How To Center Your Page in Browser Windows
How To Center Your Page in Browser Windows? - CSS Tutorials - Page Layout and Background Image Design In the previous exercise, the page width is fixed, but the page is not centered. If you want to center your page in the browser window, you can add the CENTER tag before the DIV tag. The following t... 2007-05-11, 5379👍, 0💬

What Is Screen Resolution
What Is Screen Resolution? - CSS Tutorials - Page Layout and Background Image Design Screen resolution is measure by how many graphical points (pixels) per inch or DPI (dots per inch) on a computer system. Screen resolution can be changed within a range on most of today's computer systems. For examp... 2007-05-11, 5376👍, 0💬

How To Test Browser Resolutions
How To Test Browser Resolutions? - CSS Tutorials - Page Layout and Background Image Design How to test your browser resolution? A simple way is to put a simple page with several images of different sizes. Then you view this page with different browsers on different computer systems and measure those... 2007-05-11, 5359👍, 0💬

How To Set Page Width to a Fixed Value
How To Set Page Width to a Fixed Value? - CSS Tutorials - Page Layout and Background Image Design If you don't want your page to be resized when browser window is resized, you need to set your page width to an absolute value. Many Webmasters use TABLE tags to set page width to a fixed value. But it ... 2007-05-11, 5342👍, 0💬

What Is Browser Resolution
What Is Browser Resolution? - CSS Tutorials - Page Layout and Background Image Design Browser resolution is measure by how many graphical points (pixels) per inch on a Web browser window. Logically, browser resolution should be identical to the screen resolution, for example, FireFox. But there is a... 2007-05-11, 5324👍, 0💬

What Are the Length Units Used in CSS
What Are the Length Units Used in CSS? - CSS Tutorials - Page Layout and Background Image Design 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 ... 2007-05-11, 5256👍, 0💬

What Are the Page Widths on Popular Websites
What Are the Page Widths on Popular Websites? - CSS Tutorials - Page Layout and Background Image Design If you want to find out what are the page widths on some popular Websites, first enter the following HTML code into a file, pageSizes.html: <html><body> <p>Page Size Test by F... 2007-05-11, 5160👍, 0💬

How To Set Page Widths to Relative Length Units
How To Set Page Widths to Relative Length Units? - CSS Tutorials - Page Layout and Background Image Design Knowing that setting page widths to absolute length units will cause problems on images with different browser resolutions, you can set your page width to a relative length unit, like px (pixel... 2007-05-11, 5126👍, 0💬

All rights in the contents of this web site are reserved by the individual author. fyicenter.com does not guarantee the truthfulness, accuracy, or reliability of any contents.