CSS Display

The display attribute sets how an element should be displayed, and the visibility attribute specifies whether an element should be visible or hidden.

Box 1
Box 2
Box 3

Hidden elements-display: none or visibility: hidden

An element can be hidden by setting the display property to “none” or the visibility property to “hidden”. Note, however, that these two methods will produce different results.

visibility: hidden can hide an element, but the hidden element still needs to occupy the same space as before. In other words, although the element is hidden, it still affects the layout.

Example

h1.hidden {visibility:hidden;}

display:none can hide an element, and the hidden element will not take up any space. In other words, the element is not only hidden, but the space originally occupied by the element will disappear from the page layout.

Example

h1.hidden {display:none;}

CSS Display-blocks and inline elements

The block element is an element that occupies the entire width, and is surrounded by newlines before and after.

Examples of block elements:

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

Inline elements only need the necessary width and do not force line breaks.

Examples of inline elements:

  • <span>
  • <a>

How to change the display of an element

You can change inline elements and block elements, and vice versa, to make the page appear to be combined in a specific way and still follow web standards.

The following example displays list items as inline elements:

Example

li {display:inline;}

The following example uses the span element as a block element:

Example

span {display:block;}

Note: Changing the display type of an element depends on how the element is displayed and what kind of element it is. For example, if an inline element is set to display:block, it is not allowed to have nested block elements inside it.

More examples

How to display the inline element of the element.

This example demonstrates how to display an inline element of an element.

How to display the block element of the element.

This example demonstrates how to display a block element of an element.

How to use the collapse property of a table.

This example demonstrates how to use the collapse property of the table.