Property display

Specifies how a certain HTML element should be displayed.

The display CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex.

Property values

• contents - Makes the container disappear, making the child elements children of the element the next level up in the DOM
• inline - Displays an element as an inline element (like ). Any height and width properties will have no effect. This is default.
• block - Displays an element as a block element (like

  ). It starts on a new line, and takes up the whole width

• flex - Displays an element as a block-level flex container
• grid - Displays an element as a block-level grid container
• flow-root - The element generates a block box that establishes a new block formatting context, defining where the formatting root lies.

Syntax

/* precomposed values */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* box generation */
display: none;
display: contents;

/* multi-keyword syntax */
display: block flex;
display: block flow;
display: block flow-root;
display: block grid;
display: inline flex;
display: inline flow;
display: inline flow-root;
display: inline grid;

/* other values */
display: table;
display: table-row; /* all table elements have an equivalent CSS display value */
display: list-item;

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

Source MDN

Using the multi-keyword syntax with CSS display

What grid and flexbox demonstrate, however, is that an element has both an outer and an inner display type. The outer display type describes whether the element is block-level or inline-level. The inner display type describes how the children of that box behave.

As an example, when we use display: flex we create a block-level container, with flex children. The children are described as participating in a flex formatting context. You can see this if you take a — normally an inline-level element — and apply display: flex to it. The becomes a block-level element.

This means that instead of setting display: flex to create a block-level box with flex children, we use display: block flex. Instead of display: inline-flex to create an inline-level box with flex children, we use display: inline flex.

Source MDN