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?
>Solution :
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 page
opacity: 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, use opacity: 0