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 ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access