Introduction:

In this article we will to learn what is css visibility property or how to use css visibility property or css visibility property with example.

 

Description:

The CSS visibility property is used to control whether an element is visible or not.

 

Note: An invisible element also take up the space on the page. By using display property you can create invisible elements that don't take up space.

 

This property can take one of the following values listed in the table below:

visible:It is the by default value. It specifies that the element is visible.

hidden:It specifies that the element is invisible (but still takes up space).

collapse:It is used only for table elements. It is used to remove a row or column, but it does not affect the table layout.

The space taken up by the row or column will be available for other content.

If collapse is used on other elements, it renders as "hidden"


initial:It is used to set this property to its default value.

inherit:It is used to inherit this property from its parent element.

Example of CSS visibility property:

 

<!DOCTYPE html>
<html>
<head>
    <title>Example of CSS visibility property</title>
    <style>
        h1.visible {
            visibility: visible;
        }
 
        h1.hidden {
            visibility: hidden;
        }
    </style>
</head>
<body>
    <h1 class="visible">I am visible</h1>
    <h1 class="hidden">I am invisible</h1>
    <p>
        <strong>Note:</strong> An invisible element also take up the space on the page.
        By using display property you can create invisible elements that don't
        take space.
    </p>
</body>
</html>   



 Let's check live example

Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like