O'Reilly logo

Cascading Style Sheets: The Definitive Guide, Second Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required