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 except "none".

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

  Do It Yourself

The above example will show all &li;p> and <span> 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>

See More

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>

See More

What You Should Know at the End of This Lesson

  • You should be able to tell briefly what CSS Display is all about.
  • You should be able to distinguish between a block-level element and an inline element.
  • You should be able to change an element's display from block-level to inline element.
  • If you enjoy this lesson, please share.