Cascading Style Sheets: The Definitive Guide

Inline Elements

Any visible element that is not a block-level element (either directly, or by implication, as with floated elements) is an inline element. Setting box properties for inline elements gets into even more interesting territory than we’ve already covered. Some good examples of inline elements are the EM tag and the A tag, both of which are nonreplaced elements, and images, which are replaced elements.

Warning

Note that none of this applies to table elements. CSS2 introduces new properties and behaviors for handling tables and table content, and these new features behave in ways fairly distinct from either block-level or inline formatting. See Section 10.1 for an overview.

Line Layout

First, we need to understand how inline content is laid out. It isn’t as simple and straightforward as block-level elements, which just generate boxes and usually don’t let anything coexist next to them. That’s all well and good, of course (even if it does ignore floats), but look inside a block-level element such as a paragraph. There are all these lines of text, and we may well ask, “How did they get there? What controls their arrangement? How can I affect that?”

In order to understand how lines are generated, let’s first consider the case of an element containing one very long line of text, as shown in Figure 8-45. Note that we’ve put a border around the line; this has been accomplished by wrapping the entire line in a SPAN element, and assigning it a border style:

SPAN {border: 1px dashed ...