CSS DisplayandVisibility

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

Box 1

Box 2

Box 3

Hidden Elements - display:none or visibility:hidden

Hiding an element can be done by setting the display property to "none", or setting the visibility property to "hidden". However, please note that these two methods produce different results.

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

Example

h1.hidden {visibility:hidden;}

Try it Yourself »

display:none can hide an element, and the hidden element does not occupy any space. In other words, not only is the element hidden, but the space it originally occupied also disappears from the page layout.

Example

h1.hidden {display:none;}

Try it Yourself »

CSS Display - Block and Inline Elements

A block element is an element that takes up the full width and has line breaks before and after it.

Examples of block elements:

<h1>
<p>
<div>

An inline element only takes up the necessary width and does not force line breaks.

Examples of inline elements:

<span>
<a>

How to change an element's display

You can change inline elements to block elements and vice versa, which can make the page look as if it is assembled in a specific way while still following web standards.

The following example displays list items as inline elements:

Example

li {display:inline;}

Try it Yourself »

The following example displays a span element as a block element:

Example

span {display:block;}

Try it Yourself »

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

More Examples

How to display the inline elements of an element.

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

How to display the block elements of an element.

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

How to use the collapse property of a table.

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

other extensions