CSS display (show) and Visibility (visibility)

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

You can hide an element by setting the display property to "None" or by setting the visibility property to "hidden". However, note that these two methods produce different results.

Visibility:hidden can hide an element, but the hidden element still needs to occupy the same space as it did before it was hidden. That is, although the element is hidden, it still affects the layout.

Instance H1.hidden {Visibility:hidden;}
Try it»

Display:none can hide an element, and hidden elements do not occupy any space. In other words, the element is not only hidden, but also the space that the element originally occupies will disappear from the page layout.

Instance H1.hidden {Display:none;}
Try it»

CSS Display-block and inline elements

A block element is an element that occupies the full width and is a newline character before and after.

Examples of block elements:

• <p>
• <div>

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

Examples of inline elements:

• <span>
• <a>

How to change the display of an element

Inline elements and block elements can be changed, and vice versa, so that the page appears to be combined in a particular way and still adheres to web standards.

The following example displays the list items as inline elements:

Instance li {display:inline;}
Try it»

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

Instance span {Display:block;}
Try it»

Note: The display type of the change element looks at how the element is displayed and what 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 an inline element of an element.

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

How to display the element's block element.

This example shows 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 a table

CSS display (show) and Visibility (visibility)