What's the difference between display: none and visibility: hidden?
See Them in Action
I created three identical swatches of code, and then set the display and visibility properties on two so you can see how they look.
An Image with Text Beside It
This is a picture of my cat Mali. She is sitting next to a model of my Audi TT. She enjoys chasing it, especially when it runs into her. I especially liked this picture because it looks like a giant cat is attacking a car. Okay, you have to use your imagination...
<div class="div">
<img src="maliwithcar_tn.jpg" alt="mali" class="basic" />
<p>This is a picture of my cat Mali. She is sitting next to a model of my Audi TT. She enjoys chasing it, especially when it runs into her. I especially liked this picture because it looks like a giant cat is attacking a car. Okay, you have to use your imagination...</p>
</div>
div { border: 1px solid black; }
img { float: left; padding: 5px; }
Set visibility: hidden on the image
This is a picture of my cat Mali. She is sitting next to a model of my Audi TT. She enjoys chasing it, especially when it runs into her. I especially liked this picture because it looks like a giant cat is attacking a car. Okay, you have to use your imagination...
img { float: left; padding: 5px; visibility: hidden; }
Set display: none on the image
This is a picture of my cat Mali. She is sitting next to a model of my Audi TT. She enjoys chasing it, especially when it runs into her. I especially liked this picture because it looks like a giant cat is attacking a car. Okay, you have to use your imagination...
img { float: left; padding: 5px; display: none; }Jennifer Kyrnin
