An Introduction To the CSS Display Property

A lot more goes into styling web pages than colors and fonts. Even the simplest web pages need layout rules to look good, which requires knowledge of CSS properties like position, float, and the subject of this post, the display property.

If you’re building a website from scratch, these properties are fundamental. And even if you’re not a developer, having basic knowledge of CSS properties like display will enable you to make small tweaks to your site’s look if necessary — no need to reach out to a developer to do it for you.

To help you out, this guide will explain what the CSS display property does and what it can add to your CSS toolkit. We’ll cover the most common uses of the property, along with visual examples.

What is the CSS display property?

Every HTML element is represented by a box that contains the element’s content and determines the amount of spacing around that content. The CSS display property specifies how this box appears on the web page relative to other elements, as well as the behavior of its child elements (i.e. the elements inside of it).

In CSS, an element can be one of two “levels”: block or inline. Block-level elements exist on their own line and span the entire width of the page unless another width is specified. <div> and <p> are examples of block-level elements.

Inline-level elements do not break the flow of content. Multiple inline elements can exist on the same line. <span>, <b>, and <a> are examples of inline-level elements.

The display property targets these levels and lets us change them for our styling needs. A display rule is written like so:

display: value;

Here, value specifies the way the element appears — in other words, its level. Let’s now look at the most common values of the display property.

CSS Display Values

By default, browsers render certain elements on different levels. For example, <div> elements are rendered as blocks by default, while <span> elements appear inline by default, as demonstrated below:

See the Pen css display: div and span by HubSpot (@hubspot) on CodePen.

Here, the first three <div> elements take up the full width of the page and begin on a new line. The following three <span> elements all exist on the same line, and their widths and heights are determined by the text inside them (as well as some extra padding I added).

The display property can override these default display types. So, let’s take this example and see what changes when we apply various display rules.

CSS Display: inline

The inline display value turns any element into an inline element. These elements will appear on the same line without breaks, like <span> elements behave.

See the Pen css display: inline by HubSpot (@hubspot) on CodePen.

Note that I removed the padding rule to better illustrate the effect of inline. Also, The width and height of inline elements are determined by the content they contain. You can’t set their widths and heights with CSS.

If we add text between our <div> elements, we clearly see how they fit within a line:

CSS Display: block

The block display value makes an element a block element. Block elements start a new line and span the entire width of the viewport by default, like how <div> elements behave. There are also line breaks before and after these elements.

See the Pen css display: block by HubSpot (@hubspot) on CodePen.

CSS Display: inline-block

The inline-block value is a hybrid of inline and block. Elements assigned display: inline-block appear on the same line with other inline elements, a characteristic of inline elements. However, inline-block elements are also like block elements in that you can change their widths and heights with CSS.

See the Pen css display: inline-block by HubSpot (@hubspot) on CodePen.

CSS Display: list-item

Elements assigned display: list-item behave like <li> elements. The entire element becomes a block-level element, the text inside becomes its own inline element, and a bullet point is added.

See the Pen css display: list-item by HubSpot (@hubspot) on CodePen.

Note that without the rule margin-left: 30px; our bullet points would fall outside the viewport. I increased the left margin to make them visible.

Add the rule list-style-position: inside; to place the bullets inside the list item element:

See the Pen css display: list-item inside by HubSpot (@hubspot) on CodePen.

CSS Display: none

display: none removes the targeted element (and all its child elements) from the page. This causes accompanying elements to behave as if this element does not exist. In this example, display: none is applied to the second <div> element and the second <span> element.

See the Pen css display: none by HubSpot (@hubspot) on CodePen.

To hide an element without affecting page layout, use the CSS visibility property instead:

See the Pen css display: visibility hidden by HubSpot (@hubspot) on CodePen.

CSS Display: grid

The grid display value makes the assigned element a grid container, and its child elements behave as grid items. Learn how to make CSS grids in our in-depth guide.

CSS Display: flex

Finally, the flex display value sets an element as a flex container, another way to build dynamic and responsive elements. You learn more about this CSS module in the blog post: Here's the Difference Between Flexbox, CSS Grid & Bootstrap.

Refine your layouts with the CSS display property.

The display property allows you to define the appearance of page elements outside of their default settings. This is a powerful capability, and most modern web pages make use of it to some extent.

So, even a basic knowledge of display can help us grasp what happens behind the scenes in web pages. There’s more going on than most realize.

Editor's note: This post was originally published in November 2020 and has been updated for comprehensiveness.