CSS Display Property

Jan
6

CSS Display Property

The CSS classification properties allow you to control how to display/visibility of an element.

Display Inline

The element will generate an inline box: no line break before or after the element.

1
2
3

p { display: inline; }
<p>These two paragraphs generates inline boxes, and it results in</p>
<p>no normal breaks between the two elements.</p>

Display Block

The element will generate a block box: a line break before and after the elements.

1
2
3

p { display: block; }
<p>These two paragraphs generates inline boxes, and it results in</p>
<p>no extra spacing between the two elements.</p>

Display None

The element content will not display.

1 2	p { display: none; } <p>This paragraph will not display.</p>

Menu List Using Display Inline

The CSS code:

#inline ul { font-family: verdana, helvetica, sans-serif; font-size: 11px; list-style-type: none; text-align: center; margin: 0px; padding: 0px; }
#inline ul li { display: inline; line-height: 18px; }
#inline ul li a:link { color: #000000; text-decoration: none; padding: 6px 12px 6px 12px; background-color: #bed8b8; }
#inline ul li a:visited { color: #000000; text-decoration: none; padding: 6px 12px 6px 12px; background-color: #bed8b8; }
#inline ul li a:hover { color: #000000; background-color: #f0d88b; }
#inline ul li a:active { color: #000000; text-decoration: none; padding: 6px 12px 6px 12px; background-color: #bed8b8; }

The HTML code:

<div id="inline">
<ul>
<li><a href="#" title="Home Page">Home Page</a></li>
<li><a href="#" title="About Us">About Us</a></li>
<li><a href="#" title="Photo Album">Photo Album</a></li>
<li><a href="#" title="Blog">Blog</a></li>
<li><a href="#" title="Contact Us">Contact Us</a></li>
</ul>
</div>

Inline List

Menu List Using Display Block

The CSS code:

#block ul { font-family: verdana, helvetica, sans-serif; font-size: 11px; list-style-type: none; margin: 0px; padding: 0px; }
#block li { margin: 0px 0px 2px 0px; line-height: 18px; }
#block a:link { display: block; color: #000000; background-color: #bed8b8; width: 150px; padding: 3px 6px; text-decoration: none; }
#block a:visited { display: block; color: #000000; background-color: #bed8b8; width: 150px; padding: 3px 6px; text-decoration: none; }
#block a:hover { background-color: #f0d88b; color: #000000; }
#block a:lactive { display: block; color: #000000; background-color: #bed8b8; width: 150px; padding: 3px 6px; text-decoration: none; }

The HTML code:

<div id="block">
<ul>
<li><a href="#" title="Home Page">Home Page</a></li>
<li><a href="#" title="About Us">About Us</a></li>
<li><a href="#" title="Photo Album">Photo Album</a></li>
<li><a href="#" title="Blog">Blog</a></li>
<li><a href="#" title="Contact Us">Contact Us</a></li>
</ul>
</div>