ScreenshotNeo
Sign in Get a free key

BlogGuides

CSS Display Property: Values and Examples

Learn how CSS display controls an element’s box and its children’s layout, with practical examples, comparisons, and fixes for common layout problems.

By the ScreenshotNeo team4 October 20268 min read

The CSS display property determines how an element participates in the surrounding layout and how its children are arranged. For example, use display: flex to lay children out with flexbox, display: grid for a grid, display: none to remove an element from layout, and display: contents to remove only its own box. The useful way to understand most values is as two decisions: the element’s outer display type and its children’s inner layout type.

1. The two parts of display

MDN defines display as setting whether an element is treated as a block or inline box and the layout used for its children, such as flow, grid, or flex. The MDN display reference describes these outer and inner roles.

  • Outer display controls how the element’s box participates in its parent’s layout, such as as a block-level or inline-level box.
  • Inner display controls how the element lays out its child boxes, such as normal flow, flexbox, or grid.

Many familiar values combine both parts into one keyword. When a value specifies only an outer type, the inner type defaults to normal flow. When it specifies only an inner type, the outer type defaults to block.

/* Outer block, children in normal flow */
.panel { display: block; }

/* Outer block, children in flex layout */
.toolbar { display: flex; gap: 1rem; }

/* Outer inline, children in flex layout */
.inline-toolbar { display: inline-flex; gap: 1rem; }

2. Quick comparison

Value Outer behavior Children or box behavior Typical use
block Block-level Normal flow Sections and panels
inline Inline-level Normal flow Text-level content
inline-block Inline-level Block formatting behavior inside Inline badges with dimensions
flow-root Block-level Creates a block formatting context Containing floats
flex / inline-flex Block / inline-level Flex layout Rows, toolbars, aligned groups
grid / inline-grid Block / inline-level Grid layout Two-dimensional layouts
list-item Block-like list item Creates a marker box Custom list-like elements
table family Table formatting roles Table rows, cells, captions, and groups Prefer semantic table HTML for tabular data
contents No principal box Children still generate boxes Flattening a wrapper for layout
none No box Element and descendants generate no boxes Hiding content from layout

3. Choose a value by the layout task

Put content in normal block or inline flow

display: block makes an element block-level in its parent’s flow. Its children use normal flow unless another inner layout is specified. display: inline makes it participate in a line of surrounding content; it is commonly appropriate for text-level elements. Inline boxes do not behave like block containers for sizing and vertical margins, so use a block, inline-block, flex, or grid value when you need a box with those layout controls.

.notice { display: block; margin-block: 1rem; }
strong { display: inline; }

Keep a sized box in a line: inline-block

inline-block participates inline with neighboring content while its contents use block formatting behavior. It is equivalent to inline flow-root. It is useful for compact badges or controls that need width, height, padding, or a background while staying in a line.

.badge {
  display: inline-block;
  padding: 0.25em 0.6em;
  border-radius: 0.4em;
  background: #e8eefc;
}

Contain floats: flow-root

flow-root creates a block formatting context. This contains floats inside the element, prevents outside floats from intruding into it, and suppresses margin collapsing across the formatting-context boundary. It can be a clear way to contain a floated child without adding unrelated layout behavior. See MDN’s guide to block formatting contexts.

.article-section { display: flow-root; }
.article-section img { float: inline-start; margin: 0 1rem 1rem 0; }

Arrange children along a flexible axis: flex

display: flex makes a block-level flex container; its direct children become flex items. Use flexbox when the main task is arranging items along a primary axis, with alignment and distribution that adapt to available space. Use inline-flex when the container itself should sit inline with surrounding content.

.toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

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

display: flex changes the children’s layout; it does not automatically make them wrap. Add flex-wrap: wrap if wrapping is desired, and set sizing or shrink behavior where items must not compress unexpectedly.

Arrange rows and columns: grid

display: grid makes a block-level grid container; use grid when rows and columns or aligned tracks are central to the layout. inline-grid makes the grid container inline-level in surrounding flow.

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

For a responsive layout, define the track rule that fits the design, for example with a media query or an auto-fitting repeat. display: grid alone does not specify the number or size of columns.

Create a list marker

display: list-item creates a principal box and a ::marker box governed by list-style properties. Prefer <ul>, <ol>, and <li> when the content is semantically a list; changing an arbitrary element’s display does not give it the full meaning of list HTML.

.custom-item {
  display: list-item;
  list-style-type: square;
}

MDN documents the list-item display value and its marker behavior.

Use table display roles carefully

The table family includes roles such as table-row, table-cell, and table row-group values. For actual tabular data, use semantic elements such as <table>, <tr>, and <td> rather than trying to construct a data table from generic elements and display values.

Changing a table element to block, grid, or flex can change how it is represented in the accessibility tree in some browsers and affect screen-reader announcements. Test the actual browser and assistive technology combinations you support before changing table display behavior.

Remove a wrapper box: contents

display: contents removes the element’s own principal box while its child boxes continue to participate in layout. This can help when a wrapper is needed in the markup but should not create a layout box. It also means the wrapper itself no longer supplies a box for backgrounds, borders, sizing, or positioning. Because accessibility-tree behavior can matter, check the result with your supported browser and assistive technology, and keep semantic meaning in the HTML rather than relying on display styling.

.layout-wrapper { display: contents; }

Remove an element and its descendants from layout: none

display: none means the element and its descendants generate no boxes and take no space in layout. Use it when that is the intended state. If the element should remain in the layout but not be visibly rendered, use visibility instead; visibility preserves the layout space.

.is-hidden { display: none; }
.reserve-space-but-hide { visibility: hidden; }

4. Single-keyword and explicit two-keyword syntax

CSS also allows the outer and inner types to be written separately. This makes the two layout decisions visible in the declaration, but does not require mechanically rewriting existing styles.

/* Compact form */
.navigation { display: inline-flex; }

/* Explicit outer and inner types */
.navigation { display: inline flex; }

Common mappings include block = block flow, inline = inline flow, flow-root = block flow-root, flex = block flex, grid = block grid, inline-block = inline flow-root, inline-flex = inline flex, and inline-grid = inline grid.

For a browser matrix that needs a fallback, MDN’s multi-keyword syntax guide shows declaring a supported single-keyword form first, then the explicit form:

.navigation { display: inline-flex; }
@supports (display: inline flex) {
  .navigation { display: inline flex; }
}

Check the support requirements for the browsers you target before using newer or less common values, including grid-lanes and ruby-related values. The core property is broadly available, but support can differ by value.

5. Common mistakes and troubleshooting

Symptom Likely cause What to check or change
Width or height has no visible effect on text content The element is inline Use a box type appropriate for sizing, such as inline-block, block, flex, or grid.
A flex row overflows instead of wrapping Flex items do not wrap by default Set flex-wrap: wrap and review item sizing and minimum widths.
Grid children remain in one implicit column No column tracks were defined Set grid-template-columns or another track definition.
A floated image escapes its section The parent does not establish a containing block formatting context Use display: flow-root on the section when appropriate.
Hidden content leaves a gap visibility: hidden retains layout space Use display: none if the content should take no space.
A wrapper’s background or padding disappears display: contents removes its own box Restore a box-generating display value or move the visual styling to an element that has a box.
A new display value appears ignored The browser may not support that value, or another CSS rule may win Inspect computed styles and the cascade; verify support for the specific value in your browser matrix.
A table is announced differently by a screen reader Changing its display can affect its accessibility-tree representation in some browsers Keep semantic table markup and test the actual browser and assistive technology combinations.

6. Practical selection checklist

  1. Decide whether the element should be block-level or inline-level in its parent.
  2. Decide how its children should be laid out: normal flow, flex, grid, table roles, or list-item behavior.
  3. For floats, decide whether the parent needs a block formatting context; consider flow-root.
  4. For hidden content, choose whether it should keep space (visibility) or leave layout (display: none).
  5. Keep HTML semantics meaningful and check accessibility when changing table or wrapper display behavior.
  6. Check support for the particular value in the browsers you target, especially less common values.

7. ScreenshotNeo: inspect the rendered result without browser setup

When a display change needs a visual check across a page, viewport, or device preset, you can capture a rendered page with ScreenshotNeo, a website screenshot API and MCP server for developers. Its documentation covers the API options.

Or skip the browser setup

One GET request returns a screenshot. This cURL example saves the result as WebP:

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com \
  -o shot.webp

Equivalent Python and Node.js requests:

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)
const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

ScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before the shot; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots. Sign up for 1,000 free screenshots a month, with no card.

8. FAQ

What does display: flex do?

It makes the element a block-level flex container and lays out its direct children as flex items.

What is the difference between display: none and visibility: hidden?

display: none removes the element and descendants from layout; visibility: hidden hides the element while retaining its layout space.

Should I use inline-block or inline-flex?

Use inline-block for an inline-level box with block formatting inside. Use inline-flex when the element’s children need flex layout.

Do I need to use the two-keyword syntax?

No. It makes outer and inner display types explicit, while the familiar single-keyword forms remain useful and map to those combinations.

Keep reading

7 min read

LinkedIn Open to Work Image

Learn what LinkedIn’s Open to Work photo frame means, who can see it, how to add or remove it, and how to choose the right privacy setting.