CSS

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:
<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

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:
<span>
<a>
<img>

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.
<style>
li {
    display: inline;
}
span {
    display: block;
}
</style>