CSS Tutorial

CSS Display

The display of an element is aided with CSS in two ways.

By using the display property.
By using the visibility property.

Both of the above properties can be used to hide/show and HTML element, but however one is provided with more functions than the other.

Values for the display Property

block
inline
inline-block
list-item
table
table-cell
table-row
none

Values for the visibility Property

collapse
hidden
visible

Hiding an Element

An HTML element can be hidden with CSS in two ways:

using display property
using visibility property

Using display property to Hide an Element

You can hide an HTML element by setting the display property to "none".

Example

The above example will hide all <p> elements in the webpage.

Using visibility property to Hide an Element

You can also hide an HTML element by setting the visibility property to "hidden" or "collapse".

The "hidden" value hides the element but it will still retain the layout space, while the "collapse" value hides the element totally with both layouts but only works for a table.

If you wish to hide an element totally without retaining any layout space, use display: none;.

css-visiblitly-hidden-example-1

Showing an Element

By default, an element is not meant to be hidden, but in case you should show an element that is already hidden, use the display or visibility property.

Using the display property to Show an Element

Any of the display property values can be used to make element visible except none.

a {
display: block;
}
p {
display: inline;
}

Do It Yourself

The above example will show all <a> and <p> elements.

Using the visibility property to Show an Element

To show an element using the visibility property, set its value to visible.

p {
visibility: visible;
}

Types of CSS Display

We have two major types of elements based on their display

inline elements
block-level elements

Block-Level Elements

A block-level element is an element that takes up the full width of the parent element and has a line break before and after it.

See examples of block-level elements.

<h1>
<p>
<div>
<hr>

Inline Elements

An inline element only takes up as much width as necessary for its child or content and does not force line breaks.

<a>
<span>
<b>