How to use display and visibility

Compare block and inline

Block boxes normally begin on a new line; inline boxes flow with text. Inline elements do not respond to width and height like blocks.

span.badge { display: inline-block; }
main { display: block; }

Create layout containers

A value of flex or grid changes how direct children are arranged while the container remains a box in the surrounding flow.

.toolbar {
  display: flex;
  gap: 0.75rem;
}

Remove or conceal a box

display: none removes the box and generally removes content from the accessibility tree. visibility: hidden preserves its layout space but also hides it from interaction.

Choose hiding intentionally

• Use the HTML hidden attribute for content that is not currently relevant
• Do not hide important labels or focusable controls accidentally
• Opacity alone makes content transparent but still present and interactive
• Test hidden and revealed states with keyboard navigation