Hiding Elements

There are various situations where we would like to have an element not displayed, particularly when we are running a JavaScript program. There are essentially two ways to hide an element with CSS: one displays a space where the element would be if it were visible and the other displays everything as if the element did not exist at all. These two methods are illustrated below.

HidingElements.html

<!DOCTYPE html>
<html>
<head>
  <title>XoaX.net's Hiding HTML Elements Example</title>
</head>
<body>
    <h1>This is normal.</h1>
	<h1 style="visibility:visible;">This is visible.</h1>
	<h1 style="visibility:hidden;">This is hidden.</h1>
	<h1 style="display:block;">This is displayed as a block.</h1>
	<h1 style="display:none;">This is not displayed.</h1>
	<h1 style="display:inline;">This is displayed as inline.</h1>
</body>
</html>

Core CSS

Hiding Elements

HidingElements.html

Output

This is normal.

This is visible.

This is hidden.

This is displayed as a block.

This is not displayed.

This is displayed as inline.