The Display Property: Controlling Document Flow

The display property is the most foundational layout property in CSS. It determines how an element participates in the document flow and how its children are laid out.

1. The Full display Value List

Value	Behavior
block	Full-width block, starts on new line
inline	Flows with text, no width/height control
inline-block	Inline flow, but accepts dimensions
flex	Flexbox container (block level)
inline-flex	Flexbox container (inline level)
grid	Grid container (block level)
inline-grid	Grid container (inline level)
none	Removed from layout and accessibility tree
contents	Element vanishes, children participate in parent's layout
table / table-cell	Mimics <table> / <td> behavior
list-item	Renders with a bullet/marker
flow-root	Block container that establishes a BFC

2. block — Full-Width Stack

Block elements stack vertically, each on its own line. They fill all available horizontal space.

p, div, h1, section, article, header, footer { display: block; } /* these are block by default */

/* Overriding inline to block */
span { display: block; width: 200px; } /* Now accepts width */

Default block elements: <div>, <p>, <h1>–<h6>, <section>, <article>, <header>, <footer>, <nav>, <ul>, <ol>, <li>, <form>, <blockquote>

3. inline — Text Flow

Inline elements flow alongside text. They ignore width, height, and vertical margins.

a, span, strong, em, img { display: inline; } /* Default for most text elements */

What you cannot control on display: inline:

• width, height → ignored
• margin-top, margin-bottom → ignored
• padding-top, padding-bottom → applied visually, but doesn't push other elements

4. inline-block — The Hybrid

The best of both worlds: flows inline, but accepts all box model properties.

.badge {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: var(--color-primary);
  border-radius: 50%;
  vertical-align: middle;
}

.nav__item {
  display: inline-block;
  padding: 0.5rem 1rem;   /* Vertical padding now works correctly */
}

5. flex and grid — Modern Layout

These activate the Flexbox and CSS Grid layout systems:

.row     { display: flex; gap: 1rem; }
.page    { display: grid; grid-template-columns: 250px 1fr; }

See Modules 06 and 07 for complete documentation.

6. none — Removal from Layout

.modal { display: none; }  /* Gone. No space. Not rendered. Screen readers skip it. */

Comparison with related properties:

Method	Visible	Takes Space	In Accessibility Tree
display: none	❌	❌	❌
visibility: hidden	❌	✅	✅
opacity: 0	❌	✅	✅
clip-path: inset(100%)	❌	✅	✅

7. contents — Transparent Wrapper

The element itself doesn't render — its children participate directly in the parent's layout:

/* If .wrapper is a flex item, its children become flex items instead */
.wrapper { display: contents; }

8. flow-root — Block Formatting Context

Creates a new Block Formatting Context (BFC) without side effects — the modern clearfix:

.clearfix-modern {
  display: flow-root;  /* Contains floated children without extra markup */
}

9. Showing / Hiding Elements: The Right Pattern

/* ❌ Toggle with display — not animatable */
.hidden { display: none; }
.visible { display: block; }

/* ✅ Toggle with opacity + visibility — animatable */
.hidden  { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s, visibility 0.3s; }
.visible { opacity: 1; visibility: visible; pointer-events: auto; }

/* ✅ Accessible screen-reader-only content */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

10. WordPress Display Context

In WordPress/GeneratePress, most layout elements are block by default. Key overrides:

/* Make GP widget links display as block for full click area */
.widget ul li a { display: block; padding: 0.25rem 0; }

/* Inline GP breadcrumb separators */
.breadcrumb-item + .breadcrumb-item::before { display: inline-block; }

/* Bricks nested elements */
.brxe-container { display: flex; }