CSS Display and Visibility

CSS Display and Visibility

The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden.

Box 1

Box 2

Box 3

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.

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

  • <h1>
  • <p>
  • <div>

An inline element only takes up as much width as necessary, and does not force line breaks.

Examples of inline elements:

  • <span>
  • <a>

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;}

Note: Changing the display type of an element changes only how the element is displayed, NOT what kind of element it is. For example: An inline element set to display:block is not allowed to have a block element nested inside of it.