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:
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.