HTML Guides for display

The CSS display property controls how an element generates boxes in the layout. It determines whether an element behaves as a block-level or inline-level element and defines the layout model for its children (e.g., flow, flexbox, or grid). Because display is fundamental to page layout, using an invalid value means the browser will ignore the declaration entirely, potentially causing unexpected rendering.

Common causes of this error include:

• Typos — writing dipslay: block, display: blok, or display: flx instead of the correct keywords.
• Confusing values from other properties — using values like center, hidden, absolute, or relative, which belong to properties like text-align, visibility, or position, not display.
• Invented or outdated values — using non-standard or deprecated values that browsers don’t recognize, such as display: box (an old prefixed flexbox syntax without the prefix).
• Missing vendor prefixes — some older syntaxes like -webkit-flex were valid in certain browsers but are not standard CSS values.

The valid values for display include: block, inline, inline-block, flex, inline-flex, grid, inline-grid, flow-root, none, contents, table, table-row, table-cell, table-caption, table-column, table-column-group, table-footer-group, table-header-group, table-row-group, list-item, and the multi-keyword syntax like block flow, block flex, or inline grid.

Using invalid CSS values is a problem because browsers silently discard declarations they don’t understand. This means your intended layout won’t be applied, and debugging can be difficult since no visible error appears in the browser. Validating your CSS catches these mistakes early.

Examples

Invalid: typo in the display value

<div style="display: flx;">
  <p>This container was meant to be a flex container.</p>
</div>

Fixed: correct flex value

<div style="display: flex;">
  <p>This container is now a flex container.</p>
</div>

Invalid: using a value from another property

<nav style="display: center;">
  <a href="/">Home</a>
</nav>

The value center does not belong to display. If the goal is to center content, use a valid display value combined with appropriate alignment properties.

Fixed: using flex with centering

<nav style="display: flex; justify-content: center;">
  <a href="/">Home</a>
</nav>

Invalid: using a position value instead of a display value

<div style="display: absolute;">
  <p>Overlay content</p>
</div>

Fixed: using the correct property

<div style="position: absolute; display: block;">
  <p>Overlay content</p>
</div>

Invalid: using a non-standard value

<ul style="display: box;">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

Fixed: using the standard flexbox value

<ul style="display: flex;">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>