Block vs Inline Elements

Block Elements:

  • A block-level element always begins on a new line, and browsers add a margin (a space) before and after the element by default.

  • A block-level element always occupies the entire available width (stretches out to the left and right as far as possible).

  • <p> and <div> are two often used block components.

Inline Elements:

  • A line break is not used to begin an inline element.

  • An inline element only uses the space that is required.

  • An inline element cannot contain a block-level element.

Other inline elements are:

<div> element

<span> element