CSS Display

CSS Display: Controlling Element Layout Behavior

The CSS display property defines how an element participates in page layout and how its children arrange inside it. Learning block, inline, inline-block, flex, grid, and none gives you full control over how tags stack, sit side by side, or disappear.

Comparing Common Display Values

• block: Starts on a new line, stretches full available width by default, and respects width, height, and all margins/padding (div, p, section).
• inline: Flows horizontally inside text lines and ignores explicit width, height, and vertical margins (span, a, strong).
• inline-block: Flows inline side-by-side while respecting width, height, and vertical padding/margins—handy for badges and button-links.
• flex and grid: Turn the element into a Flexbox or CSS Grid container controlling child alignment in 1D rows/columns or 2D grids.
• none: Removes the element visually, collapses its space completely, and hides it from screen readers.

.nav-link {
    display: inline-block;
    padding: 8px 14px;
    background-color: #e2e8f0;
    color: #0f172a;
    border-radius: 6px;
    text-decoration: none;
}

.is-hidden {
    display: none;
}

.invisible-placeholder {
    visibility: hidden;
}

display: none vs. visibility: hidden

display: none collapses the element out of document layout as if it were deleted, whereas visibility: hidden hides the pixels visually while keeping the blank rectangular box in layout. Neither should be used alone if screen readers still need the content—for accessible screen-reader-only labels, use a clipped .sr-only utility instead.

Common Mistakes to Avoid

• Trying to animate display: none directly with CSS transitions: Elements jump abruptly between none and block; animate opacity or height transitions cleanly instead.
• Using inline-block grids without clearing whitespace gaps: Spaces between HTML tags create ~4px gaps between inline-block cards; use display: flex; gap: 16px; instead.
• Setting width on display: inline spans: Switch to inline-block or block first so dimensions take effect.

Frequently Asked Questions

Can I change an inline tag like a into a block element?

Yes. Setting display: block; on an a link makes the entire full-width card or sidebar row clickable.

Should I use inline-block or Flexbox for horizontal menus?

Use display: flex; on the parent container for navigation menus and button groups because gap and align-items: center eliminate whitespace glitches.