Margins and Em

We demonstrate margins and padding. I place a normal flow div with a blue background.

Now I add a 1em margin all around the block. Note that the margin is transparent, and the background color shows through.

N.B. I did add margin top and bottom of the blue block, but note that there is no additional space between the blue block and this explanatory text. That is because of margin collapse. In short, when two vertical margins contact, they overlap each other, and the final margin is not the sum of the two values, but the maximum of the two values. Suppose I increase the margin to 4 em so that the blue box margin is larger than the normal paragraph margin.

OK, now returning to 1em margins, let's look at padding. Now I add a 1em padding all around the content of the block. Note that the text is now pushed away from the edge of the blue area.

We now add a rather large border of 4px. Note that the border width does not remove anything from the margin, padding or content area. The total width (and height) of a box is the total of the 7 dimensions:

• two margins, left and right (or top and bottom)
• two borders, left and right (or top and bottom)
• two paddings, left and right (or top and bottom)
• and the content width (or height).

Note that early IE browsers somehow got wrong in various ways the calculation of total width. Look on-line for resources about how to deal with this.

The size of an Em

An Em is a traditional typographic unit of size equal to the size of the letter M. So it is relative to the current font size. This makes it a good measure, because it measures in terms of relationships. For instance, the indentation of a paragraph should be by an amount relative to the font size. However, other times it is a difficult measure, since it might vary across the page.

MMMMM With a 5 Em indent.

MMMMM With a 5 Em indent.

MMMMM With a 5 Em indent.

(c) 2007 Burton Rosenberg. All rights reserved.