display

Every element on a web page is a rectangular box. The display property in CSS determines just how that rectangular box behaves.

span.icon {
  display: inline-block;  /* Characteristics of block, but lays out inline */
}

The default value for all elements is inline. Most “User-Agent Stylesheets” (the default styles the browser applies to all sites) reset many elements to “block.” Let’s go through each of these, and then cover some of the other less common values.

Syntax

display: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>

• Initial value: inline
• Applies to: all elements
• Inherited: no
• Computed value: a pair of keywords representing the inner and outer display types plus optional list-item flag, or a <display-internal> or <display-box> keyword; see prose in a variety of specs for computation rules
• Animation: n/a

Values

The display property accepts keyword values. Those keywords can be grouped into different categories.

/* <display-outer> (its natural flow). */
display: block;
display: inline;

/* <display-inner> (its contents) */
display: flex;
display: flow-root;
display: grid;
display: table;
display: ruby; /* experimental */

/* <display-listitem> (generates a content box and an inline list-item box) */
display: list-tem;
display: inline list-tem;

/* <display-internal> (defines table and ruby layouts) */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base; /* experimental */
display: ruby-text; /* experimental */
display: ruby-base-container; /* experimental */
display: ruby-text-container; /* experimental */

/* <display-box> (determines whether to display a box or not) */
display: contents;
display: none;

/* <display-legacy> (CSS2 single-keyword syntax) */
display: inline-block;
display: inline-flex;
display: inline-grid;
display: inline-table;

/* Two-value examples */
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;

/* Global values */
display: inherit;
display: initial;
display: revert;
display: unset;

Examples

display: inline

The default value for elements. Think of elements like <span>, <em>, or <b> and how wrapping text in those elements within a string of text doesn’t break the flow of the text.

The <em> element has a 1px red border. Notice it sits right inline with the rest of the text.

An inline element will accept margin and padding, but the element still sits inline as you might expect. Margin and padding will only push other elements horizontally away, not vertically.

An inline element will not accept height and width. It will just ignore it.

display: inline-block

An element set to inline-block is very similar to inline in that it will set inline with the natural flow of text (on the “baseline”). The difference is that you are able to set a width and height which will be respected.

display: block

A number of elements are set to block by the browser UA stylesheet. They are usually container elements, like <div>, <section>, and <ul>. Also text “blocks” like <p> and <h1>. Block level elements do not sit inline but break past them. By default (without setting a width) they take up as much horizontal space as they can.

display: run-in

First, this property doesn’t work in Firefox. Word is that the spec for it isn’t well defined enough. To begin to understand it though, it’s like if you want a header element to sit inline with the text below it. Floating it won’t work and neither will anything else, as you don’t want the header to be a child of the text element below it, you want it to be its own independent element. In “supporting” browsers, it’s like this:

display: flex

The display property is also used for new-fangled layout methods like Flexbox.

.header {
  display: flex;
}

There are some older versions of flexbox syntax, so please consult this article for the syntax in using flexbox with the best browser support. Be sure to see this complete guide to Flexbox.

display: flow-root

The flow-root display value creates a new “block formatting context”, but is otherwise like block. A new BFC helps with things like clearing floats, removing the need for hacks to do that.

.group {
  display: flow-root
}

display: grid

A CSS Grid layout is initially set by the display property.

body {
  display: grid;
}

Check out our complete guide to CSS Grid.

display: none

Entirely removes the element from the page. Note that while the element is still in the DOM, it is removed visually and any other conceivable way (you can’t tab to it or its children, it is ignored by screen readers, etc).

display: contents

This value results in an element’s children to appear as if they were direct children of the element’s parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques.

.element {
  display: contents;
}