CSS Layout - The display Property

The display property specifies if/how an element is displayed. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

Block-level Elements

A block-level element always starts on a new line and takes up the full width available.
The <div> element is a block-level element.
Examples of block-level elements:
<h1> - <h6>

Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary.
Examples of inline elements:

Override The Default Display Value

  • Every element has a default display value. However, you can override this.
  • Changing an inline element to a block element, or vice versa.
li {
    display: inline;
span {
    display: block;