HTML · The document layer

What is the difference between block and inline elements?

EasydisplaylayoutcssUpdated Oct 2026

Short answer

Block elements start on a new line and fill the available width, while inline elements flow within text and only take the width of their content. CSS display can change this, but the default behaviour still matters.

The distinction comes from the browser's default stylesheet. Block-level boxes stack vertically, while inline boxes sit in the line box with text. Some elements also have different allowed content models.

Typical block elements: div, p, section, article, h1 to h6, ul, li
Typical inline elements: span, a, strong, em, img, code
Inline elements ignore width and height in many cases and do not start a new line
Inline-block combines inline flow with block-like sizing
CSS display can override the default, so a span can become a block

html

<p>
  This paragraph is a block. It contains
  <strong>inline emphasis</strong> and a
  <a href="/docs">link</a>.
</p>

<div>This block starts on a new line.</div>

The content model matters as well as the display. Putting a block element inside a paragraph is invalid HTML even if CSS makes it look fine, because the parser may restructure the document.

Do not choose an element only for its default display. Choose it for meaning, then use CSS for layout. A div and a span are both generic; their difference is mostly their default box.

Follow-ups you should expect

Interviewers use these to check whether the first answer was understanding or memorisation.

1Can a span be made to behave like a block?
2Why is a div inside a p invalid?
3What is inline-block useful for?
4Does display affect the accessibility tree?

Say it in the interview

Block elements start on a new line and take up the available width, while inline elements flow with text and only take the width of their content. That comes from default browser styles, and CSS display can override it. I still pick elements for their meaning rather than their default box. The content model also matters, so I avoid putting block elements inside a paragraph even if it looks fine.

Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.

Now say it out loud.

Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live HTML mock interview and get scored feedback on depth, clarity and confidence.

Start a free HTML interview Browse all questions

Follow-ups you should expect

Related questions

Now say it out loud.