CSS Tip: The Difference Between visibility: hidden, visibility: collapse and display: none

11:30 AM

Let's say you do NOT wish to display your Twitter username in the Twitter feed in your website, but you cannot access the element in the HTML to remove it. CSS comes to the rescue, but what is the best method for the desired output?


visibility:hidden will make the element invisible, but the space that the element takes up in the page remains.

visibility:collapse will make the element invisible but the space that the element takes up in the page remains. visibility: collapse is meant to remove table elements from a table, so in non-table elements visibility:collapse will work like visibility:hidden.

Finally, display: none will remove the element from the page altogether; shifting the remaining elements accordingly. BINGO!

Happy Coding,

Carmen
c2mCREATIVES

You Might Also Like

1 comments

instagram