CSS: CSS Display & Visibility
Last updated: 2026-10-13
The display property is one of the most important CSS properties, controlling how elements are rendered and laid out on the page.
Display Property Quick Reference
| Value | Behavior | Width/Height | Typical Elements |
|---|---|---|---|
block |
New line, full width | Accepts | div, p, h1-h6 |
inline |
Same line, content width | Ignores | span, a, em |
inline-block |
Same line, accepts dimensions | Accepts | button, input |
flex |
Flex container | — | Layout containers |
grid |
Grid container | — | Layout containers |
none |
Completely hidden | — | Any element |
1. Display Values
(1) block
Block elements occupy a full row, stacking vertically:
▶ Example
▶ Try it Yourself(2) inline
Inline elements stay on the same line, only taking up content width:
▶ Example
▶ Try it Yourself(3) inline-block
Combines inline positioning with block-level dimensions:
▶ Example
▶ Try it Yourself2. Visibility & Opacity
(1) visibility: hidden vs display: none
▶ Example
▶ Try it Yourself(2) opacity
Controls element transparency (0-1), affecting all content including children:
▶ Example
▶ Try it Yourself3. Element Hiding Methods Comparison
| Method | Occupies Space | Visible | Interactive | Animation |
|---|---|---|---|---|
display: none |
❌ | ❌ | ❌ | ❌ |
visibility: hidden |
✅ | ❌ | ❌ | ✅ |
opacity: 0 |
✅ | ✅ | ✅ | ✅ |
position: absolute; left: -9999px |
❌ | ❌ | ✅ | ❌ |
❓ FAQ
Q What's the difference between display: none and visibility: hidden?
A display: none removes the element completely — no space occupied, surrounding elements fill the gap. visibility: hidden only hides the visual — element still occupies space. For animation transitions, opacity: 0 with transition is smoother.
Q How to remove gaps between inline-block elements?
A The 4px gap between inline-block elements comes from HTML whitespace (line breaks and spaces). Solutions: set
font-size: 0 on parent then reset on children, or write tags on the same line without breaks.Q opacity: 0 vs visibility: hidden — which performs better?
A opacity: 0 elements can still trigger click events, visibility: hidden cannot. Performance is similar, but opacity supports transition animations for smooth show/hide, visibility cannot transition.
📖 Summary
displayis the core layout property- Understanding
block,inline,inline-blockdifferences helps control element arrangement display: noneandvisibility: hiddenboth hide elements, but one occupies space and the other doesn't — different use cases- In modern layouts,
display: flexanddisplay: gridare the most powerful layout tools
📝 Exercises
- Create a page with
block,inline, andinline-blockboxes to observe arrangement and size differences. - Set navigation links to
inline-blockwith width, height, and padding to create a horizontal navbar. - Demonstrate the difference between
display: noneandvisibility: hidden. - Create a "button group" using
display: inline-block, handling the whitespace gap issue.
