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 books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.