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". However,
notice that these two methods
produce different results:
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.
Example
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:
Example
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:
Example
li {display:inline;}
