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.