EasyConcept

What is the difference between display none and visibility hidden in CSS?

Technology:
CSS
Experience:
Intern,
Junior
Roles:
Frontend Developer,
Full Stack Developer
Topics:
CSS Layout,
Accessibility

Quick answer

display: none removes the element from the layout so it takes no space; visibility: hidden hides it but leaves the empty space, and the element can still be read in the accessibility tree in some cases.

Detailed explanation

display: none is as if the element was not in the document for layout: later siblings move up. visibility: hidden keeps the box, so a 200px-tall banner still reserves 200px. opacity: 0 is similar to hidden for layout, but the element can still receive pointer events unless you also set pointer-events: none.

For content that should not be announced to screen readers, prefer display: none or the HTML hidden attribute. To hide visually but keep it available to assistive technology (a skip link target, for example), use a visually-hidden class rather than display: none.

Download CSS PDFMore CSS questions

Related interview questions

  • CSSEasy

    What is the CSS box model?

    Every element is a box made of content, padding, border and margin. The default content-box size counts only the content; border-box includes padding and border in the width you set.

    Intern 路 Junior 路 CSS Layout
  • CSSEasy

    What is the difference between inline, block and inline-block in CSS?

    Block elements start on a new line and take the full available width; inline elements sit in the text flow and ignore width and height; inline-block sits in the flow but accepts width, height, padding and margin on all sides.

    Intern 路 Junior 路 CSS Layout
  • CSSMedium

    What is the difference between Flexbox and CSS Grid?

    Flexbox is one-dimensional (a row or a column). CSS Grid is two-dimensional (rows and columns at once). Use Flexbox for alignment along a line; use Grid when the layout is a real 2D structure.

    Junior 路 Mid-level 路 CSS Layout
  • CSSMedium

    How does CSS specificity work?

    Specificity is the score the browser uses to decide which rule wins: inline styles beat IDs, IDs beat classes/attributes/pseudo-classes, and those beat elements. When scores tie, the last rule in the source wins.

    Junior 路 Mid-level 路 CSS Layout

Free templates to practise with