Difference between "style.visibility" and "style.display" 

Basically there are different ways for displaying and hiding data through javascript in which "style.visibility and style.display " are two ways to hide and display data.

Below are the properties used for hide and display 

visibility property

visible - The element is visible. This is default

hidden - The element is not visible, but still affects layout

display property

block - Element is rendered as a block-level element

none - Element will not be displayed

style.display:

Basic Difference between 

style.display:

1. display:none will not be available in the page and does not occupy any space. 

2. display:none doesn't preserve the space

style.visibility:

1. visibility:hidden hides an element, but it will still take up the same space as before. The element         will be hidden, but still affect the layout. 

2. visibility:hidden preserve the space

Below example will give clear view for display and visibility

In this example I have a pick-list called type and values "First" and "Second" and two more sections 

"First Section" and "Second Section". So what i am going to do is hiding sections based on the selected picklist value.

Initial screen:(before adding code for hiding )

Code for Style.visibility

<apex:page standardController="account">
    <script>
        function hidesection(x)
        {
            var typevalue = x.value;
            if(typevalue == 'First' )
            {
                 document.getElementById('firstsec').style.visibility = 'visible';
                 document.getElementById('secondsec').style.visibility = 'hidden';
            }else if(typevalue == 'Second')
            {
                 document.getElementById('firstsec').style.visibility = 'hidden';
                 document.getElementById('secondsec').style.visibility = 'visible';
            }else
            {
                 document.getElementById('firstsec').style.visibility = 'hidden';
                 document.getElementById('secondsec').style.visibility = 'hidden';
            }
        }
    </script>
    <apex:form >
        Type   <apex:inputField value="{!account.type}"   onchange="hidesection(this);"  />
       <div id="firstsec" style="visibility:hidden;">
           First Section
       </div>
       <div id="secondsec" style="visibility:hidden;">
           Second Section
       </div>
   </apex:form>
</apex:page>

Onpage Load :

When you select pickval as First then "Second section" will be hidden:

When you select pickval as Second then "First Section" will be hidden but you can see there is an empty line in the "first section" place

Code for Style.display

<apex:page standardController="account">
    <script>
        function hidesection(x)
        {
            var typevalue = x.value;
           
            if(typevalue == 'First' )
            {
                 document.getElementById('firstsec').style.display= 'block';
                 document.getElementById('secondsec').style.display= 'none';
            }else if(typevalue == 'Second')
            {
                 document.getElementById('firstsec').style.display= 'none';
                 document.getElementById('secondsec').style.display= 'block';
            }else
            {
                 document.getElementById('firstsec').style.display= 'none';
                 document.getElementById('secondsec').style.display= 'none';
            }
        }
    </script>
    <apex:form >
        Type   <apex:inputField value="{!account.type}"  onchange="hidesection(this);"  />
       <div id="firstsec" style="display:none;">
           First Section
       </div>
       <div id="secondsec" style="display:none;">
           Second Section
       </div>
   </apex:form>
</apex:page> 

Onpage Load :

When you select pickval as First then "Second section" will be hidden:

When you select pickval as Second then "First Section" will be hidden but you can see "second section" will be displayed in the First line itself and there will be no empty line in the "first section" place.

Hope this is helpful for you  :-)