Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesIf a hidden <div> leaves an empty gap, it is probably being concealed with visibility: hidden or opacity: 0. Both keep the element’s layout box. Use display: none when the surrounding content should move into that space.
Why the gap remains
CSS can make an element invisible without removing it from layout. The hiding method determines whether neighboring content closes the gap.
visibility: hidden
visibility: hidden makes the element invisible while its box remains in normal layout. The element still reserves the same width and height. This behavior is documented in the MDN visibility reference.
opacity: 0
opacity: 0 makes the element and its children fully transparent, but transparency does not remove the element from layout. It can still occupy space and may remain present for interaction or accessibility purposes unless other rules change that behavior.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
display: none
display: none removes the element from layout, so it has no box and surrounding content can close the gap. Its descendants are not displayed.
Use the property that matches your layout goal
| Goal | CSS | Layout result |
|---|---|---|
| Hide the element and reclaim its space | display: none; |
The element is removed from layout. |
| Hide it but reserve its place | visibility: hidden; |
The layout box remains. |
| Make it transparent | opacity: 0; |
The element remains in layout while becoming invisible. |
Remove the gap with display: none
Apply display: none to the div or, preferably, to the class or state that controls whether it is shown.
.hidden {
display: none;
}For example:
<div class="panel hidden">Optional content</div>When the hidden class is present, the panel no longer contributes width or height to the layout. Remove the class when the panel should appear.
If display: none does not remove the space
Inspect the page in your browser’s developer tools and check the computed styles. A later rule, a more specific selector, or an !important declaration may be overriding your rule and assigning a visible display value such as block, flex, or grid.
If the div itself has display: none but a gap remains, the space is coming from another part of the layout. Check these nearby causes:
- Padding on the parent element.
- The parent’s
gapproperty, especially in flex or grid layouts. - A margin on a neighboring sibling.
- Another element that is still visible but has a fixed height, width, or an empty box.
Use the box-model overlay and computed-style panel to identify which element owns the remaining space rather than changing unrelated margins blindly.
Rank #4
Accessibility considerations
display: none removes the element from the accessibility tree in normal cases, as well as from visual layout. That is appropriate for content that is not currently available, but it is not interchangeable with visually hiding content that must remain available to assistive technology. MDN notes exceptions for content referenced by a visible element’s aria-describedby or aria-labelledby.
If the layout must preserve its place, use visibility: hidden. If content should remain perceivable to screen-reader users while being visually hidden, choose an accessibility-tested visually-hidden technique rather than relying on opacity: 0 alone.
Quick Recap
Quick decision checklist
- Need the surrounding content to move up or across? Use
display: none. - Need an invisible placeholder so the layout does not shift? Use
visibility: hidden. - Need transparency while retaining the element’s layout box? Use
opacity: 0. - Still see a gap after applying
display: none? Inspect parent padding, flex or gridgap, sibling margins, fixed dimensions, and CSS overrides. - Does the hidden content need to remain available to assistive technology? Verify the accessibility impact before choosing
display: none.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
