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.

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

elements as inline elements:

Example

li {
    display: inline;
}

The following example displays elements as block elements:

Example

span {
    display: block;
}