Block-Level & Inline

The display property is the most important CSS property for controlling layout. This 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.

HTML file: Displayed by browser:
<div>This is a block-level element.</div>
<p>This is <span>an inline element inside</span> a paragraph.</p>
This is a block-level element.

This is an inline element inside a paragraph.

Block-level Elements

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). These are 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. These are examples of inline elements:

  • <span>
  • <a>
  • <img>
Back button Table of Contents Next button