Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

CSS: Units of Measurement

Learn about the basics of absolute and relative measurement.


advertisement

ou can measure CSS property values in one of two ways:

  • As an absolute value

  • As a relative value.

Absolute values have a fixed, specific value. They let you, the page creator, be exact in your measurements and control the display of your Web pages.



Example: The font size might be 14 point.

When you are using absolute values always remember that the reader might be viewing your page in a different environment from what you expect.

Relative values have no fixed, specific value. Rather, they are calculated in comparison to a current value.

Example: Type size might be larger, smaller, bolder, or lighter. Indent might be specified in em spaces, which vary with the display size of the text.

Because Web pages are viewed in so many different ways, it is often a good idea to use relative values. It gives you less absolute control but it often creates a better experience for your readers and lets your page flow dynamically.

Absolute Measurement

unit abbreviation example
points pt font-size: 12pt
There are 72 points to an inch, 12 points to a pica.
picas pc text-indent: 2pc
There are 6 picas to an inch.
centimeters cm text-indent: 4cm
inches in text-indent: 1in
millimeters mm text-indent: 8cm
 
Relative Measurement

unit abbreviation example
pixels px text-indent: 30px
A pixel is one picture element on the display monitor; there are typically between 72 and 90 pixels/inch.
em space em text-indent: 4em
An em space is the width and height of the capital letter M in the current font size and design.
x space ex line-height: 3ex
percentage of
parent's value
XX% font-size: 90%




   
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap