CSS Visibility Property

CSS Visibility property specifies if an element should be visible or hidden. It can be set to 'visible' to make contents visible and can be set to 'hidden' to hide the contents. Even after creating visibility hidden, element occupies the space on the web page.

Example 1: CSS Visibility Property

<html>
<head>
    <style>
        .hide{
            visibility:hidden;
        }
    </style>
<head>
<body>
    <h1>This is Visible Heading</h1>
    <h1 class="hide">This is Invisible Heading</h1>    
    <h1>This is Visible Heading</h1> 
</body>
<html>

Example 2: Hover the cursor on child div to make parent div visible.

CSS Display Property

The CSS display property specifies how an HTML element will be display. Normally, Display property has 3 values:

display:none;
display:block;
display:inline;

Display none: is used to hide the HTML element, the hidden element will not leave the blank, empty area on the browser.

Example 3: Hide the HTML Element using display:none.

<html>
   <style>
      .hide{
         display:none;
      }
   </style>
   <body>
      <h1>This is Visible Heading</h1>
      <h1 class="hide">This is Invisible Heading</h1> 
      <h1>This is Visible Heading</h1>    
   </body>
</html>

Display block: A block element is an element that takes up the full available width, and has a line break before and after it.

Example 4: Display Block.

<style>
    span {
        display:block;
    }
</style>
<body>
    <span>Display property with a value of "block" results in</span>
    <span>a line break between the two elements.</span>
<body>

Display inline: An inline element only takes up as much width as necessary, and does not force line breaks.

Example 5: Display inline.

<style>
    li {
        display: inline;
    }
</style>
<body>
    <p>Display a list of links as a horizontal menu:</p>
    <ul>
        <li><a href="#" target="_blank">HTML</a></li>
        <li><a href="#" target="_blank">CSS</a></li>
        <li><a href="#" target="_blank">JavaScript</a></li>
    </ul>
</body>