CSS Visibility ============== The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden. Hiding an Element - display:none or visibility:hidden Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout. h1.hidden {visibility:hidden;} display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there: h1.hidden {display:none;} CSS Display - Block and Inline Elements --------------------------------------- A block element is an element that takes up the full width available, and has a line break before and after it. Examples of block elements:

An inline element only takes up as much width as necessary, and does not force line breaks. Examples of inline elements: Changing How an Element is Displayed ------------------------------------- Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow web standards. The following example displays list items as inline elements: li {display:inline;} The following example displays span elements as block elements: span {display:block;} Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display:block is not allowed to have other block elements inside of it. Example 1 ---------

A display property with a value of "inline" results in

no distance between two elements.

Example 2 --------- A display property with a value of "block" results in a line break between the two elements. Example 3 ---------
Peter Griffin
Lois Griffin

Note: IE8 and earlier support visibility:collapse only if a !DOCTYPE is specified.