CSS: visibllity and display property

1. CSS: Visiblity:

This is the css attribute used to display or hide the contents in a VF/HTML page. This only hides the component but the existance of components remains in the page.

To hide/display a content in a page use following example:

Example:

• Hides:  

       <apex:outputPanel style="visibility:hidden;">

       </apex:outputPanel>

• Displays:

       <apex:outputPanel style="visibility:visible;">

       </apex:outputPanel>

      

2. CSS: Display:

This is the css functionality which displays or hides the content in a page. This hides the component and its existance in the page too.
   
To hide/display a content in a page use following example:

 Example:

• Hides:       

       <apex:outputPanel style="display:none;">
       
       </apex:outputPanel>

• Displays:  

       <apex:outputPanel style="display:block;">
       
       </apex:outputPanel>