HTML Block and Inline Elements: How Elements Flow on the Page

Every HTML element has a default display behaviour. Two of them cover most elements: block and inline.

Block elements

A block element starts on a new line and stretches across the full width of its parent. Paragraphs, headings, lists and div are block elements.

1
2
3
4
5

<style>
  p { background: #fff3ec; }
</style>
<p>First paragraph</p>
<p>Second paragraph</p>

Each paragraph’s background fills the whole row.

Inline elements

An inline element sits within a line of text and takes only as much room as its content. Links, strong, em, span and img are inline.

1
2
3
4

<style>
  a { background: #fff3ec; }
</style>
<p>Read <a href="#">the guide</a> and <a href="#">the FAQ</a> today.</p>

The backgrounds fit the link text only.

Quick reference

Nesting rules

• Block elements can usually contain other blocks and inline elements.
• Inline elements should contain only text and other inline elements.

Changing the behaviour

CSS can change it with the display property: display: block, display: inline or display: inline-block. A link can become a block, and a div can become inline.