CSS Visibility Property

In this chapter you will learn:
About visibility property
Values of this property
Example of this property

The visibility property is used to specify that the element will visible or not. You can hide element with the help of this property but the the element will occupy the space on the web page. This property is supported in all major browsers.

Values of this property
Values Description
visible It is the default value which specify that the element is visible.
hidden Specify that element is invisible.
collapse Only works with table to remove rows or columns. If you use this property with other element then it behave like hidden.
initial Used to set default value
inherit Inherit from parent element

Example of this property 

<html>
<head>
   <title>Example of visibility property</title>
    <style type="text/css">
        #a
        {
            visibility:visible;
        }
        #b
        {
            visibility:hidden;
        }                   
           
    </style>
    </head>
<body>
<div><img src="css-icon.jpg"id="a"alt="css icon" /> This is the example of visibility:visible </div>
<div><img src="css-icon.jpg"id="b" alt="css icon"/> This is the example of visibility:hidden</div>
</body>
</html>

Output:-
example of visibility property
SUMMARY

In this chapter, you have learned about visibility property of CSS. Some other properties are given in next chapter so click on Next button to continue-

 

Share your thought