Display none vs Visibility hidden
Display:none means no blank space.
The element will not be displayed at all to the browser.
Example: 1
<html>
<head>
<style type="text/css">
</head>
<body>
<p>1.This is a paragraph.</p>
</body>
</html>
<head>
<style type="text/css">
p.none
{
display:none;
}
</style>{
display:none;
}
</head>
<body>
<p>1.This is a paragraph.</p>
<p class="none">2.This is a paragraph.</p>
<p>3.This is a paragraph.</p></body>
</html>
Output
1.This is a paragraph.
2.This is a paragraph.
3.This is a paragraph.
Visibility:hidden
Visibility:hidden means blank space.
Example: 2
<html>
<head>
<style type="text/css">
</head>
<body>
<p>1.This is a paragraph.</p>
</body>
</html>
<head>
<style type="text/css">
p.hidden
{
visibility:hidden;
}
</style>{
visibility:hidden;
}
</head>
<body>
<p>1.This is a paragraph.</p>
<p class="hidden">2.This is a paragraph.</p>
<p>3.This is a paragraph.</p></body>
</html>
Output
1.This is a paragraph.
2.This is a paragraph.
3.This is a paragraph.
No comments:
Post a Comment