The display: none and visibility: hidden CSS properties appear to be the same thing, but they aren’t.
These two style properties do two different things.
visibility: hidden” hides the element, but it still takes up space in the layout.
“display: none” removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.
You can see the effect of these style properties on this page. I created three identical swatches of code, and then set the display and visibility properties on two so you can see how they look.
Example Code:
<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…
Here is the code:
<div style="border:1px solid black;">
<img style="float: left; padding: 5px; visibility: hidden;" class="basic" alt="mali" src="http://0.tqn.com/d/webdesign/1/0/N/6/maliwithcar_tn.jpg">
<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>
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…
Here is the code:
<div style="border:1px solid black;">
<img style="float: left; padding: 5px; display:none;" class="basic" alt="mali" src="http://0.tqn.com/d/webdesign/1/0/N/6/maliwithcar_tn.jpg">
<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>
img { float: left; padding: 5px; display: none; }