What is the difference between inline and block elements?

Block elements stack vertically and span the full width of their parent, while inline elements sit within a line of text and take only as much width as their content.

The distinction is familiar from word processors: block-level formatting is paragraph formatting (it affects whole blocks that break onto their own lines), whereas inline formatting is character formatting (it affects a run of text without breaking the line).

Block elements

• Start on a new line and force a line break after themselves.
• Stretch across the full width of their parent (by default).
• Are as tall as their content needs.
• Examples: <div>, <p>, <h1>, <nav>, <section>.

Inline elements

• Flow along within the surrounding text, no line breaks.
• Take only the width of their content.
• Examples: <span>, <a>, <strong>, <em>.

Block:    [=========================]
          [=========================]   (each on its own full-width line)

Inline:   some [highlighted] text and [more] inline here

This behaviour is a default, not a fixed property of the element — CSS can switch it with the display property (display: block / display: inline), which the inline/block cards and the display card explore further.