Cascading Style Sheets: The Definitive Guide, Second Edition

Inline Elements

After block-level elements, inline elements are the most common. Setting box properties for inline elements takes us into more interesting territory than we’ve been so far. 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 introduced new properties and behaviors for handling tables and table content, and these elements behave in ways fairly distinct from either block-level or inline formatting. Table styling is discussed in Chapter 11.

Nonreplaced and replaced elements are treated somewhat differently in the inline context, and we’ll look at each in turn as we explore the construction of inline elements.

Line Layout

First, you 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 allow anything to coexist with them. By contrast, look inside a block-level element, such as a paragraph. You may well ask, “How did all those lines of text get there? What controls their arrangement? How can I affect it?”

In order to understand how lines are generated, first consider the case of an element containing one very long line of text, as shown in Figure 7-27. Note that you’ve put a border around the line by wrapping the entire line in a span element and then assigning it a border style:

span {border: 1px dashed black;}

Figure 7-27. A ...