HTML Block and Inline

Every HTML element has a default display value depending on what type of element it is. The two display values are: block and inline.

Block-level Elements

A block-level element always starts on a new line. The browsers automatically add some space (a margin) before and after the element.

A block-level element always takes up the full width available (stretches out to the left and right as far as it can).

Two commonly used block elements are: `<p>` and `<div>`.

Block-level Elements

Result

An inline element does not start on a new line. An inline element only takes up as much width as necessary.

This is a `<span>` element inside a paragraph.

Inline Elements

Result

An inline element cannot contain a block-level element!