CSS Measurements

In CSS there are a few ways to set the size different parts of an element. You can use centimeters, inches, pixels, percentages, and em. Each measurement has it's own pros and cons when you are using them. Let's go over some benefits and issues that you may have when using each type of measurement.

Centimeters and Inches

Since these two are very similar we will cover them both at the same time. Both of these are used everyday around the world to measure physical objects. When it comes to the virtual world, everything is not static like the real world. You do not know if the user has a small thirteen inch monitor or a large twenty-one inch monitor. This will make a big difference when coding a site that will use both of these. If you tell the site that you want an element over five inches, on a twenty-one inch monitor that will be just under a fourth of the way across the screen, but on a thirteen inch monitor that will be almost half way across the monitor.

If by chance you know what size every monitor that is going to be uses, you may want to use this type of measurement. Maybe during a presentation when you know that the projector will be displaying at a given size, or in an office where everyone has the same size monitor.

Pixels

Pixels, just like centimeters and inches, can change from one computer to another. Matter of fact, the same computer can have a different number of pixels based on the screen resolution that the user is using. You can test this your self by making a site with your default resolution then changing the resolution to a different size. You may notice that the site may become more squashed together or spread further apart. Pixels do allow you to control the site more, since most users use the same resolution.

Percentages

Percentages are similar to pixels. The screen resolution will effect how a site is displayed along with the window size. If you set an element to be 15% wide, and the user changes the size of the window, then the width of the element changes also. This "effect" can be both a blessing and a curse. If you have text in an element then the text starts to wrap sooner. Because the text wraps sooner, the element becomes taller, and may disrupt the look of the site. At the same time, if a user has a screen resolution of 800X600, and another user has a resolution of 1280X1024, both will have a similar experience when browsing the site you designed, since the site was designed based on percentages.

Em

What is an em measurement? Well according to the World Wide Consortium it is the measurement of the width of characters in a font. So depending the font, the size of the em changes. Fonts that are wider have a larger em value then fonts that are thinner. According the the W3, it is recommended that you use an em measurement if you can.

What is better?

A lot of times the best measurement to use is the one that you feel comfortable working with. There are some cases that pixel width may work better then a percentage, like when adding a border around an image. Or there are times when a percentage may work better then em. This is something that you have to use your own judgement for, there is not a right or wrong answer. Like most things based in a virtual world, this is area that one way is not the best way.