How to make something invisible

To make something invisible in CSS, you either give it a visibility of hidden, or you set its display to none.

• Setting the visibility of an element to hidden hides it from view, but doesn't remove it from the flow of the page.
• Setting the display of an element to block removes it from the flow of the page, making it seem as if the element doesn't exist.

When should I use visibility and when should I use display?

Use visible when you want to hide an element from view but aren't bothered whether the space it previously occupied remains on screen; use display when you need something to completely disappear.

On to the examples

Example of setting visibility to hidden

CSS Code:

        p#hideMeExOne {
        	visibility:hidden;
        	background-color:red; /* For demonstration purposes.*/
        	padding:6px; /* For demonstration purposes.*/
        	height:80px; /* For demonstration purposes.*/
        }
		

(X)HTML Code:

		<p id="hideMeExOne"> I am hidden. Go on, look below. The only thing you will see is the space I should take up.lt;.p>
		

Result:

I am hidden. Go on, look below. The only thing you will see is the space I should take up.

The space the element takes up is still on screen, despite the fact the element has been hidden.

Example of setting display to none

CSS Code:

		p#hideMeExTwo {
			display:none;
			background-color:red; /* For demonstration purposes.*/
			padding:6px; /* For demonstration purposes.*/
            height:80px; /* For demonstration purposes.*/
		}
		

(X)HTML Code:

		<p id="hideMeExTwo">I am also hidden, but you literally can't tell I even existed!<.p>
		

Result:

I am also hidden, but you literally can't tell I even existed!

In this example, there is nothing there, despite the fact we gave our example paragraph a height of 80px;