css display and visibility

the display property specifies how a element is displayed.

the visibility property specifies whether an element should display(visible) or hidden.

the visibility property hides and visible an element, but it will still affect the layout.

Css display

the display property defines how an element. is displayed.

using css display property we can display an element as block, inline, inline-block, run-in, none, table so on.

display list items as inline.

        <html>
        
         <head>
         
           <style type="text/css"}
           
           li { display:inline; }
           
     </style>
     
   <body>
   
     <div>
     
        <ul>
        
        <li>game</li>
        <li>video</li>
        <li>audio</li>
        <li>dvd</li>
        
   </ul></div>
   
  </body></html>

display list items as block.

    <html>
        
          <head>
          
             <style type="text/css"}
             
                         li { display:block; }
                         
    </style>
    
 <body>
 
        <div>
        
        <ul>
        <li>game</li>
        <li>video</li>
        <li>audio</li>
        <li>dvd</li>
        
 </ul> </div>
 
 </body> </html>

Css - hiding an element

hiding an element can be done by setting the display property to 'none'(display:none).or

the visibility property to 'hidden'(visibility:hidden)

visibility:hidden property hides an element,but it well still affect the layout -that is,space for

the element is still reserved in the layout.

     p.hidden { visibility:hidden; }

display:none property hides an element,but it will not effect the layout.

     p.hidden { display:none; }

more examples.