Core CSS

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.


<!DOCTYPE html>
  <title>'s Hiding HTML Elements Example</title>
    <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>


This is normal.

This is visible.

This is hidden.

This is displayed as a block.

This is not displayed.

This is displayed as inline.


© 2007–2022 LLC. All rights reserved.