CSS Layout - display Property

display is the most important CSS attribute for controlling layout.

display attribute

display attribute specifies whether/how to display the element.

Each HTML element has a default display value, which depends on its element type. The default display value for most elements is block or inline.

Click to display the panel

This panel contains a <div> element, which is hidden by default. (display: none)

It is styled by CSS, and we use JavaScript to display it. (Change to display: block)

Block elements (block element)

Block elements always start on a new line and take up all available width (as much as possible to the left and right).

This <div> element is a block element.

Some examples of block elements:

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

Inline elements (inline element)

Inline elements do not start a new line and only occupy the required width.

This is a paragraphInline <span> element.

Some examples of inline elements:

  • <span>
  • <a>
  • <img>

Display: none;

display: none; It is usually used with JavaScript to hide and display elements without deleting and recreating them. If you want to know how to achieve this goal, please see the last example on this page.

By default,<script> Elements use display: none;.

Override the default Display value

As mentioned before, each element has a default display value. However, you can override it.

Changing inline elements to block elements and vice versa is very useful for making the page display in a specific way while still adhering to web standards.

A common example is to generate inline <li> Element:

example

li {
  display: inline;
{}

Try It Yourself

Note:Setting the display property of an element will only changeThe display style of elementsand will not change the type of the element. Therefore, the display style of display: block; Inline elements do not allow other block elements to be contained within them.

The following example displays the <span> element as a block element:

example

span {
  display: block;
{}

Try It Yourself

The following example displays the <a> element as a block element:

example

a {
  display: block;
{}

Try It Yourself

Hide elements - display: none or visibility: hidden?

display: none

visibility: hidden

Reset

By using display The attribute is set to none You can hide elements. The element will be hidden, and the page will display as if the element is not there:

example

h1.hidden {
  display: none;
{}

Try It Yourself

visibility: hidden; You can also hide elements.

However, the element will still occupy the same space as before. The element will be hidden, but it will still affect the layout:

example

h1.hidden {
  visibility: hidden;
{}

Try It Yourself

More Examples

Differences between display: none; and visibility: hidden;
This example demonstrates display: none; VS visibility: hidden;
Combining CSS and JavaScript to Display Content
This example demonstrates how to display an element when clicked using CSS and JavaScript.

CSS Display/Visibility Properties

Property Description
display Specify how an element should be displayed.
visibility Specify whether an element should be visible.