CSCosmos

CSS Universe

Visual Learning

Back to CSS Universe

foundation

Display Modes

Inline, block, inline-block, table, and flow-root behaviors and their layout effects.

displayflow
Explore visualizers

Learning checklist

  • Formatting contexts
  • flow-root and block formatting
  • inline vs inline-block nuances

Definition

Inline, block, inline-block, table, and flow-root behaviors and their layout effects.

Syntax

Formatting contexts

Example

Use the visualizer below to apply these properties and see the result live.

Deep dive

Why this matters

Principles, mental models, and debugging clues tailored to the topic.

Visual intuition

Each property is paired with motion or color feedback so you build muscle memory, not just recall syntax.

Copy-ready CSS

Controls emit exact CSS you can copy. Use it as a starter token or paste into DevTools for instant validation.

Performance notes

Learn where reflow, repaint, or compositing occurs so you avoid jank and choose GPU-friendly paths.

Accessibility first

Focus-visible, reduced-motion, and contrast tips are woven into every lab to keep experiences inclusive.

Practice

Try recreating a UI card using this topic. Toggle between dark and light modes to validate token contrast and responsiveness.

Tip: use DevTools overlays (grid/flex) plus the copy CSS button.

Interactive Lab

Display Modes

Switch between inline, block, inline-block, flex, grid, and flow-root to see layout behavior.

Display: block

Try these

  • Switch between block, inline, inline-block to see flow differences.
  • Try flex and grid, adjust gap, and resize to see wrapping/flow-root.
  • Use flow-root to contain floats if needed.
Alpha
Beta
Gamma
Delta
CSS
.display-demo {
  display: block;
  gap: 12px;
}
HTML
<div class="display-demo">
  <div>Alpha</div>
  <div>Beta</div>
  <div>Gamma</div>
  <div>Delta</div>
</div>

Related topics

Keep exploring adjacent concepts.

intermediate

Multi-Column Layout

Newspaper-like flows with columns, spanning, and balancing strategies.

View page