HTML and CSS Reference
In-Depth Information
he
display
property controls how a browser will display an element. his is not
as simple as it irst appears. his property has many permissible values. Among
the most important are
none
,
inline
,
block
,
inline-block
, and
run-in
.
It is important to remember when using the
display
property that it does
not actually change the nature of an element; it changes only how the browser
displays it. A paragraph that is declared inline still retains its box properties,
including its padding, and borders. More important, declaring a paragraph
inline does not allow you to nest that paragraph inside another paragraph. A
paragraph cannot be inside another paragraph, no matter what their
display
properties are set to.
he
display
property is useful when you're dealing with generated content
that must appear in contexts it was not originally intended for. For example,
suppose you want to simply list the titles of blog posts by a certain author, but
the blogging sotware only generates such information marked up as an unor-
dered list of links. Example 3.21 shows how to set the
display
property of the
list items to
inline
so that the information is displayed more like a paragraph.
Example 3.21: Using the
display
property to make a list display inline
<!DOCTYPE html>
<html>
<head>
<title>Example 2.21</title>
<style type="text/css">
ul.post-listing li { display: inline; font-style: italic; }
ul.post-listing li:after { content: ','; } /*
add a comma
*/
</style>
</head>
<body>
<ul class="post-listing"> <!--
generated content
-->
<lh>Posts by the author:</lh>
<li><a href="/?p=1">
What happened yesterday
</a></li>
<li><a href="/?p=2">
What's happening now
</a></li>
<li><a href="/?p=3">
What will happen tomorrow
</a></li>
</ul>
</body>
</html>
