This site is designed for accessibility. Content is obtainable and functional to any browser or Internet device. This site's full visual experience is available in a graphical browser that supports web standards. Please consider upgrading your web browser.

Em-box vs the content-area of a non-replaced element

As stated in the Inline Formatting Model summary paper:
em-box = font-size = content-area
embox = the embox defined in the given font
font-size = the value used with the em-box to scale the given font

The em-box is the theoretical box (or square) around a font character of a given 'size' as designed by the font designer. It is sometimes referred to as an em-square. It is the theoretical square that glyphs are designed upon. Its height is the intended distance between lines of type in the same type size. In other words its height is the distance between baselines when the font is set without any extra leading (line-height).

The relationship of font-size property to what you actually see rendered is determined by the designer. This relationship is set as an em box (em square) within the font itself. This em box, and thus the font size, doesn't have to refer to any boundaries established by the characters in a font themselves. Instead, it refers to the distance between baselines when the font is set without any extra leading (line-height). It is possible for fonts to have characters that are taller than the default distance between baselines. Or a font could have characters smaller than its em square. The effect of font-size is to provide a size for the em box of a given font. The font-size is the value used with the em-box to scale the font for display.

The content-area of non-replaced elements is the box described by the font-size of each character in the element strung together.

The content width of an inline non-replaced element is the width required by its content (which is affected by the font properties and also word-spacing, letter-spacing, which in turn are affected by whether text-align is justify or not). The width property has no effect. The horizontal margin, border, and padding are placed to the left of the beginning of the inline element and to the right of the end, but have no effect at line breaks.

Heights of inline elements are more complicated. For the purposes of the box properties, the font height is used. The vertical padding and border are placed outside the font edge. If the inline element is broken over lines, they occur on every line. However, they have no effect on the layout of the inline elements. (Since the vertical box properties have no effect on the layout of the elements, the vertical margin properties have no effect at all.)