Display, Visibility and Opacity

What Is It?

Display controls the type of box an element generates. Visibility and opacity can hide its appearance while preserving layout space.

Properties, Tags and Attributes Explained

• block: Normally starts a new line and uses available inline space.
• inline: Flows with surrounding text; ordinary inline boxes do not accept width and height like blocks.
• inline-block: Flows inline while accepting box dimensions.
• display: none: Removes the element box from layout and normally from accessibility exposure.
• visibility: hidden / opacity: 0: Both preserve space; opacity alone does not disable focus, clicks, or accessibility exposure.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Inline badges

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Display, Visibility and Opacity</title>
  <style>
    .tag { display: inline-block; padding: 8px; margin: 4px; background: #dbeafe; }
  </style>
</head>
<body>
  <span class="tag">HTML</span><span class="tag">CSS</span>
</body>
</html>

What you see: The tags share a line when space allows and keep their padding.

Example 2: Compare hidden space

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Display, Visibility and Opacity</title>
  <style>
    .removed { display: none; }
    .hidden { visibility: hidden; }
  </style>
</head>
<body>
  <p>Before</p><p class="removed">Removed</p><p class="hidden">Hidden but takes space</p><p>After</p>
</body>
</html>

What you see: The hidden paragraph leaves a gap; the removed paragraph does not.

Example 3: Compare opacity with visibility

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Display, Visibility and Opacity</title>
  <style>
    .faded { opacity: .35; }
    .hidden { visibility: hidden; }
    p { padding: 12px; background: #dbeafe; }
  </style>
</head>
<body>
  <p class="faded">Faded text still takes space and remains exposed as content.</p><p class="hidden">Hidden text takes space.</p><p>Content after both boxes</p>
</body>
</html>

What you see: Opacity fades the whole box and its text; visibility hidden suppresses painting while leaving space. Use partial opacity for decoration, rather than making essential text hard to read.

When and Where to Use It

Use display none for content that should be absent, and inline-block for small labels in text flow.

Common Mistake or Useful Tip

Do not hide a focusable control only with opacity: 0; it can still receive keyboard focus.

Try It Yourself

Change the hidden paragraph to display none and watch the gap disappear.