Intro

This article covers the basics of display types. Learn more about using display flex.

Boxes and Elements on the Web

One of the foundational pieces of building on the web is understanding how elements come together on a page.

A webpage is comprised of a series of containing elements and children elements, which can be thought of as boxes within boxes. In this model, every element is a box, and the display property controls how the element is laid out and behaves. Assigning a container element a given property will allow its children elements to inherit these same traits.

Display Property Values

The display property is used to control how elements are shown and behave in the browser. There are six main values: block, inline, inline-block, flex, grid, and none.

The first three values (block, inline, inline-block) control how a single element behaves.

On the other hand, the flex and grid values are used on a container element to control how the children are arranged.

Single-element Display Values

Note: In the following examples, each Item box has a specified height of 50px.

Block

The element will span the full width of its parent element or a certain width that you specify and will start on a new line. Height and width properties will work on display block elements. Most elements have a default display of block.

Inline

The elements will only be as wide as their content (in this case, the text) and will not start on a new line. Any height and width properties have no effect on inline elements. In the example above, even though they have a height of 50px specified, this is not applied.

This is because inline elements fit themselves on the same line as other content automatically. 

Link Elements (HTML anchor tags), Inline Elements (HTML <span>), and Images are the most common Elements that are inline display by default.

Inline-block

The element will behave like a hybrid between display block and inline, meaning that the element's default width will be as large as its content but other height and width values can be set. Inline-block elements will not start a new line.

Container Display Values

Flex

The flex display value is used on a container element to position its first-level children in one alignment (either in rows or columns).

The element with a display of flex is a block-level element and introduces new rules to position its first-level children. You can nest flex containers within flex containers.

In the example above, the container's children are initially display block, but when we make the container display flex, the children are changed into flex items. We then change the Flex Direction and Justify Content properties to change the child arrangement.

There are additional properties to control the children's position and layout. Learn more about using flexboxes.

Grid

This display value transforms an element into a grid container and is used to position its first-level children into a grid layout. Grid containers can be nested within grid containers.

In the example above, once we set the display to grid, we then have to set up additional properties to define the number of columns or rows.

You can use the standard units to define a column or row height, but you can also use the "fraction" unit, abbreviated "fr". It is a unique unit because it depends on the width and number of columns or rows in the grid layout.

For example, we can define three columns to be 1fr wide each. This will create three columns of equal width (the fractional number for each width would be 1/3 since there are 3 columns).

Using a display grid requires setting up more grid-related style properties to control the columns and rows of the grid. To learn more about it, follow our guide on CSS Grids.

None

The element is not rendered/displayed.

Nothing is deleted when you set an element's display to "none."

Additional Display Property Values

There are more display types such as "table", "list-item", and "run-in" which are not used as frequently as the basic and layout types. To learn more about them, check out Mozilla's documentation on the display property.