Common display Values

The CSS display property has many values. The following table lists the most commonly used:

Override the Default Display Value

The display property is used to change the default display behavior of HTML elements.

Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow the web standards.

A common example is to change <li> elements to inline, to create a horizontal menu:

Example

li {
  display: inline;
}

Note: Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display: block; is not allowed to have other block elements inside it.

The following example displays elements as block elements:

Example

span {
  display: block;
}

Example

a {
  display: block;
}

Example of More Display Values

The following example demonstrates some more display values:

Example

  p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}

  p.ex4 {display: inline-block;}
p.ex5 {display: flex;}
p.ex6 {display:
  grid;}