CSS Display & Visibility

Introduction

The display and visibility properties control how elements appear and behave in the layout. Many layout problems—elements not aligning, margins not working, width/height being ignored—happen because developers do not fully understand how display types work.

In this chapter, you will learn:

• Different display values in CSS
• How block, inline, and inline-block behave
• The difference between display: none and visibility: hidden
• How opacity affects visibility
• Real-world layout scenarios and best practices

This chapter builds directly on the box model and units, so understanding earlier chapters will help here.

What is the Display Property?

The display property defines how an element is rendered on the page and how it interacts with other elements.

div {
  display: block;
}

Every HTML element has a default display value, but CSS allows you to change it.

Default Display Values

Block Elements

Block elements start on a new line and take full available width. They respect width, height, margin, and padding.

div {
  background-color: #f0f0f0;
}

Each <div> appears on a new line.

Inline Elements

Inline elements do not start on a new line and take only required width. They ignore width and height, and vertical margins do not apply properly.

span {
  background-color: yellow;
}

Multiple spans appear on the same line.

span {
  width: 200px;
  height: 100px;
}

Inline-Block Elements (Very Useful)

inline-block combines the best of both worlds:

• Behaves like inline (stays in same line)
• Respects width, height, margin, and padding

span {
  display: inline-block;
  width: 150px;
  margin: 10px;
}

Real-world usage: Buttons, Navigation items, Badges, Tags.

Hiding Elements

Display: None

display: none completely removes an element from the layout.

.menu {
  display: none;
}

Effects: Element is hidden, takes no space. Other elements move into its place.

Visibility Property

visibility: hidden hides the element but keeps its space.

.box {
  visibility: hidden;
}

Effects: Element is invisible, space is still reserved.

Opacity Property

opacity controls transparency (0 to 1).

.card {
  opacity: 0.5;
}

Display vs Visibility vs Opacity (Comparison)

Other Display Values

Flexbox: display: flex; (Changes layout behavior completely - Covered later).

Grid: display: grid; (Allows two-dimensional layouts - Covered later).

List Items: display: list-item; (Default for li). Can be changed to inline-block for horizontal menus.

Real-World Examples

Hiding Elements Responsively

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

Navigation Menu

.nav-item {
  display: inline-block;
  padding: 10px 15px;
}

Common Beginner Mistakes & Best Practices