What does em mean?


p{padding-bottom:10[COLOR="Red"]em[/COLOR]}

What does em mean in the code above?

It means “emphemeral unit” which is relative to the current font size.

For example, if the current font size was set to 16px, then the bottom padding would be set to 160px.

What Dan says is 100% correct, but a liitle background info about em’s

Quote from “The Principles of Beautiful Web Design”

“An em is a CSS unit that measures the size of a font, from the top of a font’s cap height to
the bottom of its lowest descender. Originally, the em was equal to the width of the capital
letter M, which is where its name originated.”

This is an old typographic unit, known as an ‘em square’ or ‘mutton’. An em square was a square blank type, where the length of each side was the same as the width of an uppercase ‘M’ – normally the widest glyph in a given font.

It is often used in typography to specify the width of blanks and of different types of dashes. You’ll often see references like ‘an M/3 space’, which means a blank space that is one-third of an em wide.

In CSS, one em is defined as the current font size, however that is defined. For most elements it’s the inherited (computed) value from its parent element. The root element is special, since it doesn’t inherit from anything. 1em for the root element is the default font size specified in the browser preferences (16px in most contemporary Windows browsers).

body {font-size:16px}
p {font-size:0.75em}

With CSS like the example above, the text size in a paragraph will be 0.75×16px, or 12px.