CSS Display

The display property determines how an element is rendered in the browser. It’s one of the most powerful CSS properties because it controls layout behavior, stacking, and visibility.

Common Display Values

  • block → elements stack vertically, respect width/height, and take full available width.
  • inline → elements flow horizontally, ignore width/height, and only take up as much space as content.
  • inline-block → elements flow inline but respect width/height like block elements.
  • none → element is hidden (removed from layout but still exists in HTML).

Other values include flex, grid, table, list-item, and more, but we’ll focus on the basics here.

Inline

  • Default for most elements (like <span>).
  • Elements flow horizontally in a line.
  • Width/height cannot be applied meaningfully.

Example:

Code Block Loading...

Inline-Block

  • Similar to inline but allows width/height and margin/padding to apply.
  • Useful for buttons, badges, or small boxes inside text.

Example:

Code Block Loading...

Block

  • Default for elements like <div>, <p>, <section>.
  • Elements stack vertically.
  • Width/height, margin, and padding are respected.

Example:

Code Block Loading...

None

  • Removes the element from rendering.
  • Still exists in HTML but invisible in the browser.

Example:

Code Block Loading...

Interactive Playground

Key Takeaways

  • Inline → flows horizontally, ignores width/height.
  • Inline-block → flows inline but respects width/height.
  • Block → stacks vertically, takes full width.
  • None → hides element completely.
  • The display property is the foundation of CSS layout, later extended by flex and grid.