Thursday, 25 July 2013

what is css  property  Display:none or visibility:hidden ? 

visibility:hidden It's hides an element, but it will still take  same space as before. The element will be hidden, but still affect the layout.

example:  <!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {visibility:hidden;}
</style>
</head>

<body>
<h1>Justeffects.com</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>www.justeffects.com</p>
</body>
</html>

 Display:none: It's hides an element, and it will not take up any space. The element will be hidden  from page permanently.


example:

<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {display:none;}
</style>
</head>

<body>
<h1>justeffects</h1>
<h1 class="hidden">this is hidden text</h1>
<p>You can Notice that the hidden text does not take  space.</p>
</body>

</html>