The display property specifies if/how an element
is displayed, and the visibility property specifies if an element should be visible or
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.
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
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
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: