Block vs Inline display style in CSS

HTML elements can be displayed either in block or inline style.

The 3 ways that HTML elements can be displayed

All HTML elements are naturally displayed in one of the following ways:

Block

Takes up the full width available, with a new line before and after (display:block;)

Inline

Takes up only as much width as it needs, and does not force new lines (display:inline;)

Not displayed

Some tags, like <meta /> and <style> are not visible (display:none;)

Block example

<p> tags and <div> tags are naturally displayed block-style.

(I say “naturally” because you can override the display style by setting the CSS display property e.g. display:inline;.)

A block-display element will span the full width of the space available to it, and so will start on a new line in the flow of HTML. The flow will continue on a new line after the block-display element.

Common HTML elements that are naturally block-display include:

<div>

Your general-purpose box

<h1> … <h6>

All headings

<p>

Paragraph

<ul>, <ol>, <dl>

Lists (unordered, ordered and definition)

<li>, <dt>, <dd>

List items, definition list terms, and definition list definitions

<table>

Tables

<blockquote>

Like an indented paragraph, meant for quoting passages of text

<pre>

Indicates a block of preformatted code

<form>

An input form

Inline example

Inline-display elements don’t break the flow. They just fit in with the flow of the document.

More elements are naturally inline-style, including:

<span>

Your all-purpose inline element

<a>

Anchor, used for links (and also to mark specific targets on a page for direct linking)

<strong>

Used to make your content strong, displayed as bold in most browsers, replaces the narrower <b> (bold) tag

<em>

Adds emphasis, but less strong than <strong>. Usually displayed as italic text, and replaces the old <i> (italic) tag

<img />

Image

<br>

The line-break is an odd case, as it’s an inline element that forces a new line. However, as the text carries on on the next line, it’s not a block-level element.

<input>