display

The display property is used to specify what kind of box is generated for an element on a page.

Every element on a web page is rectangular (see box-sizing for more about this). The box type of an element eventually affects its behavior in the visual format of the page.

There are two main box formats in CSS: inline and block.

Inline boxes (or inline-level elements) are boxes that flow in a line without causing it to break. Most common examples of this are <span>s, <em>s, and <img>s. These elements are part of a line box and do not cause that line to break.

The following shows the above image with the line boxes outlined in a light grey color.

Inline-level elements can have padding and margins, but they cannot have width and height. Specifying a width and/or height on an inline element does not change its dimensions. Giving the element padding and margins will push the other elements on the line horizontally, but not vertically:

An inline-level element can accept widths and heights, however, if it is set to be an inline-block element using the display property.

Inline-block elements are similar to inline elements, except that they do accept width and height values. An inline-block element’s width and height will push the elements around it horizontally and vertically as needed.

Block boxes (or block-level elements), on the other hand, are elements that do not sit in a line box with other elements, they break past a line box, and usually occupy as much horizontal space as possible (depending on the containing block element).

Block-level elements can contain other block-level elements, in addition to inline and inline-block elements. Examples of block-level elements are paragraphs (<p>), unordered lists (<ul>), headings (<h1> through <h6>), among others, and elements that serve as containers to other elements such as <div>s, <section>s and <headers>. In the above examples shown in the images, the black area is actually a paragraph <p>, containing the line boxes with the inline-level elements.

The black areas in the following image show the block-level box generated for a heading and a paragraph that are block-level elements:

Using the display property, you can change the visual format (generated box level) of an element. You can set inline elements to block, or set block-level elements to behave like inline elements.

There are also other box formats in CSS that you can set using the display property.

You can make certain elements behave like tables and table elements. This is sometimes useful when you want some of your elements to take advantage of the positioning characteristics of tables. For example, you can have a container behave like a table, and two of its children behave like table cells; this allows you to create same-height elements and align the content of these elements vertically any way you want.

For example, Harry Roberts has written a post about how you can use the table display to create a media object, which is basically an image with text content next to it, and then align the content with the image in different ways using different table display characteristics.

In CSS3, a new display value was introduced: run-in. What run-in does is it allows you to have block-level elements behave like inline elements. You can have a block-level element behave like an inline element by setting its display to inline, of course, but there are certain situations where that would put the semantics of the elements at risk.

For example, suppose you want a heading to run at the same line with the contents of a paragraph that comes after it. If you go with display: inline, you would have to include your heading inside the paragraph tag <p>, and this will affects the semantics, as the heading will no longer be seen as a heading to that paragraph, it will become a part of it.

This is one example where the run-in value comes in handy. The heading would run in line with the contents of the paragraph, but still be an element independent of the paragraph, and therefore the semantics are preserved. The heading would behave as if it were a child of the paragraph, without actually being one. That’s very useful, but the run-in value is still experimental and doesn’t have good browser support so you still can’t count on it.

You can also remove an element completely from the flow of a page by setting its display value to none. This will remove the element completely from the page, but it will not remove it from the DOM. It will just simply not be displayed on the page, unlike the visibility property which makes the element invisible but does not remove it from the page, and so its position in the flow is preserved. See the visibility entry for details.

An element removed from the page with display: none will not be accessible by screen readers, and all of its descendants will also be removed with it. Even if you set any other display value on one of its descendants, it will still not change the effect of display: none set on their parents; they will simple me removed from the flow with their parent.

In addition to the previous display values, the display property got new display values in CSS3, as part of the Flexbox and Grid layout displays. See the values section below for details.

Trivia & Notes

The box generated for an element using the display property is also affected by the values of the position and float properties. These 3 properties interact with each other and influence the generated box of an element. Refer to this table to see how the values of these properties interact.