When I try to modify the way a web page is displayed in my browser, to not display certain elements, I added to its style display: hidden
, but this CSS statement not only undisplays the elements, but also moves them out of the flow, pushing following elements ahead to take up space the left, which is not what I want exactly.
I want to just cover instead of delete these elements I don’t want to see, to make them displayed the same color as the background, without moving their place.
Which CSS property may help me out here?
2
Answers
To hide elements without removing them from page flow you can either:
visibility: hidden;
)opacity: 0;
)There are two properties you can use instead of
display: hidden
:visibility: hidden
: It hides the element from view but they will still occupy space on the pageopacity: 0
: It will cover the element with same background as on the page as occupying space.If you want the elements to be completely invisible but still occupy space, use
visibility: hidden
If you want the elements to be transparent but still occupy space, useopacity: 0