One of the most difficult aspects of creating a page without the use of tables is learning how to control the line breaks. Up to this point we haven't taught you how to use CSS to simulate a <br /> after the use of an element. Additionaly, we have not shown how to remove line breaks that automatically occur with some elements (headers, list elements, paragraphs, etc).

All these issues and more are addressed with the display property. In this lesson you will find a brief overview and example for the most commonly used CSS Display values.

Display Block and Inline
As you have seen in our CSS Examples, we were able to create many looks for our menus. A few of the examples have no line breaks in the HTML, but we made each anchor tag have a break on specific examples. These line breaks are created with the block value.

CSS Code:
a { display: block; }
p { display: inline; }
HTML Code:
<a href="http://www.tizag.com/" target="_blank">Tizag.com - Learn to Whip the Web </a>
...
<a href="http://www.tizag.com/" target="_blank">Tizag.com - Learn to Whip the Web </a>
<br />
<p>These paragraph </p>
<p>elements</p>
<p>have been </p>
<p>inlined.</p>
Display:
Tizag.com - Learn to Whip the Web
 
Tizag.com - Learn to Whip the Web
 
Tizag.com - Learn to Whip the Web
 
Tizag.com - Learn to Whip the Web
 
Tizag.com - Learn to Whip the Web
 
These paragraph
elements
have been
inlined.

Display None (Hidden)
At times you may want to hide pieces of content, while at other times you would wish to show it. With the use of javascript, you can create collapseable menus. This topic is beyond the scope of this lesson, but feel free to check out O'Reilly's - Hierarchical Menus. Below is a simple example of how to hide an element.

CSS Code:
p.show { display: block }
p.hide { display: none; }
HTML Code:
<p class="show">This paragraph is displayed correctly because it has a display value of "block".</p>
<p class="hide">This paragraph is hidden because it has a display value of "none". Why am I even writing anything in here?</p>
Display:
This paragraph is displayed correctly because it has a display value of "block".

This paragraph is hidden because it has a display value of "none". Why am I even writing anything in here?

If you think I just didn't write the HTML for the second paragraph, check the source for this website and check for yourself!

Using display correctly is key to CSS heavy web site designs. Play around in the HTML sandbox below and see what you come up with.








http://www.tizag.com/cssT/display.php