Lesson 2.1: Dimensions – Units of Measurement

One of the most crucial, and often must frustrating, parts of CSS is dealing with the dimensions (size) of the various HTML elements on your screen to get them to line up and take up the amount of space that you want them to take up. It’s can be a nightmare if you don’t understand exactly how to calculate your widths.

Since it is so tricky and crucial, it’ll be the first thing we cover in our CSS lessons. To help you visualize each of the properties we’ll be talking about, I’ve created a diagram. See Image 2.1:

Image 2: Element Dimensions

Before we get started, we first need to discuss the units of measurement available to us in CSS.

Units of Measurement

In CSS, there are several units of measurement available to us. Many more than the pixel and occasional percentage that HTML alone could handle. In the list below, the name in the parentheses is the name you use to specify it in CSS.

Absolute units mean that they are an exact measurement and are always the same size. Relative means that the unit is relative to something. What a unit is relative to varies from unit to unit.

Absolute Units

Pixel (px)

The smallest unit of measurement on a computer screen, a pixel. Pixel stands for picture element. If you look really closely at your monitor, you’ll see a grid of squares all across the screen. One of these squares is a pixel. If the resolution of a screen is set to something below it’s maximum, something set to one pixel on a website may take up more than one pixel on the screen though. It could be argued that pixels are relative units because they are actually different sizes on different resolutions, but for all other intents and purposes it functions like other absolute units. Here is a lengthy article about pixels from the W3C: Length Units.

Point (pt)

Point was a value for font sizes in print media for a long time, though there were different standards. For CSS, one point is equivalent to 1/72 of an inch. Since nearly all screen resolutions (or at least for Internet browsers) is 72 dpi (dots per inch), this means that one point is actually equivalent to 1 pixel, in nearly all cases. If you want it to be equal to one pixel… just use pixel.

Picas (pc)

A picas is equal to 12 points, which comes from print media as well, giving it the size of roughly 1/6 of an inch.

Millimeter (mm)

A millimeter is defined in the The International System of Units (SI Units). One millimeter is a bit less than 1/25th of an inch.

Centimeter (cm)

A centimeter is 10 millimeters, and is also defined in the SI Units. One centimeter is a little under 2/5th of an inch.

Inch (in)

An inch is basically an English Standard unit of measurement, though it varies slightly depending on exactly which standard. For CSS purposes, one inch is equal to 25.4 millimeters.

Relative Units

Percentage (%)

A percentage is exactly that, a percentage. What it is a percentage of exactly varies depending on what it is applies to. A % value on a font is relative to the current font-size’s height. When applied to height and width it is relative to the parent element’s height and width respectively. When applied to padding and margin, it is relative to the element’s width.

Em (em)

Pronounced ‘m’, it is a unit of measurement back from the days of print. The Em measurement stems back from the printing press days where an M-square (or mutton square) was a blank square type which had side’s equal to the width of the font’s uppercase ‘M’, which was usually the widest letter in the font. In CSS, 1em is equal to the font’s height, meaning it would be unchanged. So, a size of 1.2em is equal to 1.2 times the font’s height. While it is based off of heights, the unit can be used for anything, just like all other CSS units.

Ex (ex)

Pronounced ‘x’, it is equal to the x-height of the current font, which is typically the height of the lowercase ‘x’ in the font. This isn’t always the case though as the font creator can define the x-height to be whatever they want. Even font’s without a lowercase ‘x’ have an x-height defined.

Using Units of Measurement

To use a unit of measurement as a value, you simply place a number and follow it with the characters for the unit. Here are some examples:

  body { font-size: 67.5%; }
  #content { height: 50em; }
  .comment { padding: .1em; }
  .menuitem { min-width: 36px; }
  .code h4 { margin: -.55em; }

One thing to keep in mind that every number must have a unit of measurement after it. If you did something like ‘font-size: 50′, it would throw an error because it doesn’t know 50 what. There isn’t a default measurement set so you must always state it.

With that said, there is one exception: zero. If the unit is zero, it doesn’t need a unit of measurement, and it is actually best to leave it off entirely. The reason for this is that 0 of anything is still just 0. 0 millimeters equals 0 inches equals 0 ems, etc. So, you can just put the number without a unit.

Related Extra Credit

I mentioned that pixels are technically relative because they are different sizes on different resolutions, but that for all other intents and purposes they function as absolute values. The “other intents and purposes” come into play when you take into account the user’s ability to change font sizes on their browser.

The ability to change the font on a browser is an accessibility tool, which allows people to show fonts bigger than normal in case they have poor eyesight, or want to display it bigger on something like a projector. In most browsers, you can change it by looking for Text Size under View or Edit in your browser. It may also be listed as Zoom.

If you specify something in pixels, it’ll stay that same size (with the exception of fonts in newer browsers, which will force the change anyways). So, if you have to be careful to avoid situations where you specify a container (like a division element) in pixels because if the font gets bigger, it may bust out of that container.

Also, for the sake of those users using older browsers, you never want to set a font-size using any absolute unit of measure. You always want them relative. We’ll talk more in-depth about this in a future lesson.

In our next lesson, we’ll talk about specifying the height, width, margin, padding, and border of units and discuss how they affect one another and talk about how you can calculate sizes properly: Lesson 2.2: Dimensions – The Properties.