HTML Block and Inline Elements

HTML elements have different display behaviors. Block elements generally start on a new line, while inline elements flow within surrounding text. CSS can change their visual display.

Block elements

Elements such as <div>, <p> and headings are commonly displayed as blocks. They take the available line width by default and begin on a new line.

Inline elements

Elements such as <a>, <strong> and <span> usually flow with the text around them.

<p>Read the <a href="/html-tutorial/">HTML tutorial</a> to learn more.</p>

Choose elements by meaning

Use an element that communicates the content's purpose. Use <div> and <span> when no more meaningful element fits, and use CSS to control layout and display.

Change display with CSS

The browser’s default display behavior is only a starting point. CSS can make an element block-level, inline, or inline-block, and can also use layout systems such as Flexbox and Grid.

.inline-link {
  display: inline-block;
  padding: 0.5rem 0.75rem;
}

.notice {
  display: block;
}

inline-block lets an element flow alongside text or other inline content while accepting width, height, and padding in ways a normal non-replaced inline element does not.

Use generic containers when they fit

<div> is a generic block container, and <span> is a generic inline container. Use them when no more meaningful HTML element describes the content. Choose elements for their purpose first, then use CSS to control their visual layout.

Block and inline questions

Can CSS change an element’s default display?

Yes. The display property changes how an element participates in layout. It does not change the meaning of the HTML element or make inappropriate nesting valid.

Is a <div> the same as a <span>?

No. Both are generic containers, but browsers normally display a <div> as a block and a <span> inline. CSS can change their visual display when needed.