HTML and CSS Reference
In-Depth Information
diSPLAy ANd ViSiBiLiT y
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>
<title>Example 2.21</title>
<style type="text/css"> li { display: inline; font-style: italic; } li:after { content: ','; } /* add a comma */
<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>
Search WWH ::

Custom Search