Block vs Inline

Learn the two fundamental display types — block elements stack, inline elements flow.

Step 1 of 5

Two types of elements

Every HTML element has a default display type: block or inline. Block elements — like <div>, <h1>–<h6>, <p>, and <section> — take the full available width and always start on a new line. Inline elements — like <span>, , , and — only take as much width as their content needs and flow alongside other content on the same line. On a Google search results page, each result card is a block element (it gets its own row). Within a result, the blue link text, green URL, and description snippet are inline elements sitting next to each other.

Think of it this way: Block elements are like shipping containers on a dock — each one gets its own row, no matter how small the cargo inside. Inline elements are like words on a line of text — they sit next to each other until the line runs out of space, then wrap to the next line.

Web Standard

The display property controls how an element behaves in the layout. Block and inline are the two most fundamental values. Every HTML element defaults to one of these — the browser's built-in stylesheet (called the user-agent stylesheet) sets these defaults.

Learn more on MDN

CSSBlock-level content CSSInline-level content