Altering Element Display

As I mentioned briefly in Chapter 1, you can affect the way a user agent displays by setting a value for the property display. Now that we’ve taken a close look at visual formatting, let’s revisit the display property and discuss two more of its values using concepts from this chapter.

We’ll ignore the table-related values, since they get covered in Chapter 11, and we’ll also ignore the value list-item since we deal with lists in detail in Chapter 12. We’ve spent quite some time discussing block and inline elements, but let’s spend a moment talking about how altering an element’s display role can alter layout before we look at inline-block and run-in.

Changing Roles

When it comes to styling a document, it’s obviously handy to be able to change the display role of an element. For example, suppose you have a series of links in a div that you’d like to lay out as a vertical sidebar:

<div id="navigation"> <a href="index.html">WidgetCo Home</a><a ...

Get Cascading Style Sheets: The Definitive Guide, Second Edition now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.