CSS: Display Property

The display property

The display property lets you specify the layout model of an element.

Two-value syntax (new since 2024)

display: outer inner;

• Outer display type → how the element is placed with respect to parent and sibling elements. (block or inline).
• Inner display type → how the element's children are laid out. (flow, flow-root, flex, grid, etc)

.x {
 display: block flow; /* classic block */
 display: inline flow; /* classic inline */
 display: inline flow-root; /* classic inline-block */
 display: block flex; /* classic flex */
 display: inline flex; /* classic inline-flex */
 display: block grid; /* classic grid */
 display: inline grid; /* classic inline-grid */
 display: block flow-root; /* classic flow-root */
}

.x {
 /* no two-value equivalent */
 display: none;
 display: contents;
}

Outer display Values

block

Element starts on a new line and takes full width

inline

Element flows with text.

Inner display Values

flow

Normal document flow (block + inline)

flow-root

Creates a new Block Formatting Context (BFC)

flex

CSS: Flexbox Layout

grid

CSS: Grid Layout

table

CSS: display: table (emulate HTML table)

Special value: none, contents

display: contents

pretent the tag does not exist, only its children or the inner text.

🟢 TIP: this is great to “remove” an extra html container element.

display: none

as if the element (and its children) does not exist.

Legacy one-value shortcuts

The one-value form are older syntax since 1990s.

The one-value form is now considered shortcuts since the intro of two-value form. They are not going to be removed.

Example. Legacy fallback

.box {
 /* legacy syntax as fallback. */
 display: inline-flex;

 /* modern syntax. */
 display: inline flex;
}

Display values examples

display: block flow

.card {
 display: block flow;
}

• Starts on a new line
• Takes full available width
• Default for <div>, <p>, <h1>, <section>, etc.

display: inline flow

.badge {
 display: inline flow;
}

• Flows with text
• Width/height ignored
• Default for <span>, <a>, <strong>, <em>

display: inline flow-root

.button {
 display: inline flow-root;
 padding: 0.6em 1.2em;
 width: 120px; /* has width! */
}

• Flows like inline
• Accepts width, height, padding, margin
• Creates a BFC (contains floats)

display: block flex

.navbar {
 display: block flex;
 gap: 1rem;
 justify-content: space-between;
}

.chip-group {
 display: inline flex;
 gap: 0.5rem;
}

display: block grid

.gallery {
 display: block grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 1.5rem;
}

display: block flow-root

.clearfix-box {
 display: block flow-root;
 /* Better than the old overflow: hidden clearfix trick. */
}

display: none

.hidden {
 display: none; /* completely removed from layout and accessibility tree */
}

• CSS: Hide Element (visibility)

display: contents

.wrapper {
 display: contents;
 /* element disappears, children promote to parent.
 great for removing a extra container element. */
}

Useful for accessibility or semantic wrappers you don’t want affecting layout.

browser support

the 2-values form are supported by all major browsers since 2024.