CSS Display & Visibility
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 |
Display Values
block
Block elements occupy a full row, stacking vertically:
Example
HTML
<style>
.block {
display: block;
width: 200px;
background: #e3f2fd;
padding: 10px;
margin: 5px 0;
}
</style>
<div class="block">Block element 1</div>
<div class="block">Block element 2</div>
inline
Inline elements stay on the same line, only taking up content width:
Example
HTML
<style>
.inline {
display: inline;
background: #fce4ec;
padding: 5px;
}
</style>
<span class="inline">Inline 1</span>
<span class="inline">Inline 2</span>
<span class="inline">Inline 3</span>
inline-block
Combines inline positioning with block-level dimensions:
Example
HTML
<style>
.inline-block {
display: inline-block;
width: 150px;
height: 80px;
background: #e8f5e9;
margin: 5px;
text-align: center;
line-height: 80px;
}
</style>
<div class="inline-block">Box 1</div>
<div class="inline-block">Box 2</div>
<div class="inline-block">Box 3</div>
Visibility & Opacity
visibility: hidden vs display: none
Example
HTML
<style>
.hidden {
visibility: hidden;
background: #ffebee;
padding: 10px;
}
.none {
display: none;
}
.visible {
background: #e8f5e9;
padding: 10px;
}
</style>
<div class="visible">Visible element</div>
<div class="hidden">Hidden but still occupies space</div>
<div class="visible">This element stays in place</div>
opacity
Controls element transparency (0-1), affecting all content including children:
Example
HTML
<style>
.semi-transparent {
opacity: 0.5;
background: #2196f3;
color: white;
padding: 20px;
}
</style>
<div class="semi-transparent">50% transparent (all content affected)</div>
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.