CSS - Display

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 12–15 minutes

Display determines how elements participate in layout. Learn common display values and when to use them.

Learning Objectives

• Differentiate block, inline, inline-block, and contents.
• Understand implications on margin/padding and width/height behavior.

Details & Examples

• block: takes full available width; respects width/height, margins stack vertically
• inline: flows with text; width/height ignored
• inline-block: inline flow but respects width/height
• display: contents: element box disappears, children participate in parent layout

.pill { display: inline-block; padding: .25rem .5rem; border: 1px solid var(--border); border-radius: 999px; }
.wrapper { display: contents; }

Try it

Common Pitfalls

• display: contents removes the box; some assistive tech support may vary—test carefully.

Checks for Understanding

1. Why does height not apply to display: inline elements?

Exercises

1. Convert an inline badge to an inline-block pill with padding and rounded corners.
2. Use display: contents to flatten a wrapper and verify semantics aren’t harmed (test with accessibility tools).