CSS: 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

1. Display Values

(1) block

Block elements occupy a full row, stacking vertically:

▶ Example

<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>

(2) inline

Inline elements stay on the same line, only taking up content width:

▶ Example

<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>

(3) inline-block

Combines inline positioning with block-level dimensions:

▶ Example

<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>

2. Visibility & Opacity

(1) visibility: hidden vs display: none

▶ Example

<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>

(2) opacity

Controls element transparency (0-1), affecting all content including children:

▶ Example

<style>
.semi-transparent {
  opacity: 0.5;
  background: #2196f3;
  color: white;
  padding: 20px;
}
</style>
<div class="semi-transparent">50% transparent (all content affected)</div>

3. Element Hiding Methods Comparison

❓ FAQ

📖 Summary

• display is the core layout property
• Understanding block, inline, inline-block differences helps control element arrangement
• display: none and visibility: hidden both hide elements, but one occupies space and the other doesn't — different use cases
• In modern layouts, display: flex and display: grid are the most powerful layout tools

📝 Exercises

1. Create a page with block, inline, and inline-block boxes to observe arrangement and size differences.
2. Set navigation links to inline-block with width, height, and padding to create a horizontal navbar.
3. Demonstrate the difference between display: none and visibility: hidden.
4. Create a "button group" using display: inline-block, handling the whitespace gap issue.

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us