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>
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>
No comments:
Post a Comment