Visibility

The visibility property is similar to the display property, but only specifies if an element should be displayed

 

With the following values assigned to the visibility property:

Value Description
visible Box is visible. Default value
hidden Box is not visible, but still occupies the same space
collapse Only used on table elements 

Removes a row or column, but does not affect layout

 

Example:

<!DOCTYPE html>
<html>
	<head>
		<title>My Document Title</title>
		<style type="text/css">
			h2 {visibility:hidden; }
		</style>
	</head>
	<body>
		<h1>A normal visible heading.</h1>
		<h2>Followed by an invisible hidden heading!</h1>
		<p>And now some text occupying the space as though the &lt;h2&gt; heading were still there!</p>
	</body>
</html>

Save & refresh browser:

A normal visible heading.

Followed by an invisible hidden heading!

And now some text occupying the space as though the <h2> heading were still there!

Leave a Reply