Block vs. Inline Elements

Every element is either a block or an inline element, and that decides how it behaves before you write a single line of CSS.

Block elements

A block takes the full width available and starts on a new line. Headings, paragraphs, lists and <div> are all blocks. Put two next to each other and they stack.

Inline elements

An inline element is only as wide as its content and stays in the flow of the text around it. Links, <strong>, <em> and <span> are inline. Put two next to each other and they share a line.

Why it matters

Inline elements go inside block elements, not the other way around. A <strong> inside a <p> is right. A <p> inside a <strong> is not, and the browser will quietly rearrange your page to fix it, which is a fun thing to debug at midnight.

If a layout is behaving strangely and you can’t work out why, this is usually the reason.