Changing Roles


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

<nav><a href="index.html">WidgetCo Home</a>
<a href="products.html">Products</a>
<a href="services.html">Services</a>
<a href="fun.html">Widgety Fun!</a>
<a href="support.html">Support</a>
<a id="current" href="about.html">About Us</a>
<a href="contact.html">Contact</a></nav>

We could put all the links into table cells, or wrap each one in its own nav or we could just make them all block-level elements, like this:

nav a {display: block;}

This will make every a element within the navigation nav a block-level element. If we add on a few more styles, we could have a result like that shown in figure below:

Changing the display role from inline to block
Changing the display role from inline to block

Changing display roles can be useful in cases where you want non-CSS browsers to get the navigation links as inline elements but to lay out the same links as block-level elements. With the links as blocks, you can style them as you would div or p elements, with the advantage that the entire element box becomes part of the link. Thus, if a user’s mouse pointer hovers anywhere in the element box, she can then click the link.

You may also want to take elements and make them inline. Suppose we have an unordered list of names:

<ul id="rollcall">
 <li>Bob C.</li>
 <li>Marcio G.</li>
 <li>Eric M.</li>
 <li>Kat M.</li>
 <li>Tristan N.</li>
 <li>Arun R.</li>
 <li>Doron R.</li>
 <li>Susie W.</li>

Given this markup, say we want to make the names into a series of inline names with vertical bars between them (and on each end of the list). The only way to do so is to change their display role. The following rules will have the effect shown in figure below:

#rollcall li {display: inline; border-right: 1px solid; padding: 0
#rollcall li:first-child {border-left: 1px solid;}
Changing the display role from list-item to inline
Changing the display role from list-item to inline

There are plenty of other ways to use display to your advantage in design. Be creative and see what you can invent!

Be careful to note, however, that you are changing the display role of elements not changing their inherent nature. In other words, causing a paragraph to generate an inline box does not turn that paragraph into an inline element. In XHTML, for example, some elements are block while others are inline. (Still others are “flow” elements, but we’re ignoring them right now.)

An inline element can be a descendant of a block element, but the reverse is not true. Thus, while a span can be placed inside a paragraph, a span cannot be wrapped around a paragraph. This will hold true no matter how you style the elements in question. Consider the following markup:

<span style="display: block;">
 <p style="display: inline;">this is wrong!</p>

The markup will not validate because the block element (p) is nested inside an inline element (span). The changing of display roles does nothing to change this. display has its name because it affects how the element is displayed, not because it changes what kind of element it is.

With that said, let’s get into the details of different kinds of boxes: block boxes, inline boxes, inline block boxes, list item boxes, and run in boxes.

« Back to Glossary Index