HTML & CSS Interview Question #132

What is the difference between opacity: 0, visibility: hidden, and display: none?

Advanced CSS, Accessibility, Performance, Debugging & Senior Scenarios Senior Advanced

Quick Interview Answer

opacity: 0 makes an element fully transparent but normally leaves its layout box and can leave it interactive unless other behavior is changed. visibility: hidden keeps its layout space but prevents normal visibility and interaction in ways defined by the visibility model.

Detailed Explanation

display: none removes the element's generated box from layout. These techniques also have different accessibility implications, so developers should choose based on whether the element should occupy space, receive interaction, and remain exposed to assistive technology.

Code Example

.transparent {
    opacity: 0;
}

.invisible {
    visibility: hidden;
}

.removed {
    display: none;
}