Did you find this useful?
Socialize it today.


CSS Units of Measurement

Thursday, March 08, 2012

tags CSS

There are many properties in CSS that are assigned a value such as length, size, width, or height. In CSS, you express these values using one of many types of units of measurement. CSS provides you with nine units with which to define the value of properties that require some sort of measurement. You should note that you can use each of these units to define the size of anything, even if the unit itself is derived from a font's size. You'll have to decide for yourself which elements should be sized using which units, but there is nothing preventing you from sizing elements using whichever measurement type you choose.



Absolute Measurement

UnitDescriptionExample
ininchestext-indent: 1in
cmcentimetersmargin-bottom: 5cm
mmmillimetersword-spacing: 10mm
ptpoints (72 points = 1 inch)font-size: 18pt
pcpicas (12 points = 1 pica)font-size: 2pc


Relative Measurement

UnitDescriptionExample
%percentageline-height: 150%
em1em is equal to the current font sizeletter-spacing: 5em
exrelative to a font's x-height.line-height: 3ex
pxpixelspadding: 20px


Point, Pica, Inch, Centimeter, and Millimeter

These units are typical used for printing. A point (1pt) equals 1/72 of an inch, while a pica (1pc) equals 1/6 of an inch. Documents intended for printed media will be able to tell the device exactly what the size is for these units. Digital displays (your monitor), will have to estimate how to convert these units into pixels. Documents designed to be displayed on the web should avoid using these units.

Pixel

Pixels define an element's size using a specific number of pixels. This is very convenient when designing for displaying information on digital monitors since it gives you exact control over the size of the element. There are several disadvantages to using pixels you should note. Setting a font's size using pixel units does not allow the user to resize that font using their browser. When you set a font's size to 12 pixels, it will always have a height of 12 pixels, regardless of what the user has set the default font size. Printing a document with sizes set in pixels may appear slightly differ from printer to printer since a pixel has no real size.

Percentage

When assigning percentage units to a property that is not a font-size or line-height, that value always relates to the parent block of that element, such as when assigning the width property, for example. When assigning percentage units to the font-size or line-height properties, they act like the em unit, where 100% equals 1em.

Em

When ems are used in CSS, the em represents either the user's default font size, or the size of the parent element's font size. Ems are set to decimal units, such as 0.9, 1em, 1.1em, etc. These units can be thought of as percentages of the parent element or default font size, where 1.1 would equal to 110%.

Ex

An ex is similar to an em, as an em is also a relative unit of measurement that defines 1 unit to be equal to the size of the letter "x" in the default font size. Please note that most browsers do not support this unit of measurement so using this unit should be avoided for use in web pages.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

HTML CSS: The Complete Reference CSS: The Missing Manual HTML CSS and JavaScript Editor