CodePen

HTML

            
              
<h1>DEMONSTRATING THE DIFFERENCE BETWEEN DISPLAY NONE AND VISIBILITY NONE</H1>

<div class="page">
  
  <div class="wrapper">
    
    <div class="box">
      <p>This box is a specimen for comparison purposes.</p>
    </div>
    <div class="box">
      <p>This box is a second specimen for comparison purposes.</p>
    </div>
    <div class="box">
      <p>This box is a third specimen for comparison purposes.</p>
    </div> 
  </div>
  
    <div class="wrapper">
    
    <div class="box">
      <p>This box is a specimen for comparison purposes.</p>
    </div>
    <div class="box display">
      <p>This box is a second specimen for comparison purposes.</p>
    </div>
    <div class="box">
      <p>This is the third box but the second box is now missing.</p>
      <p>(via DISPLAY NONE)</p>
      <p>See how the space has collapsed?</p>
    </div> 
  </div>
 
      <div class="wrapper">
    
    <div class="box">
      <p>This box is a specimen for comparison purposes.</p>
    </div>
    <div class="box visible">
      <p>This box is a second specimen for comparison purposes.</p>
    </div>
    <div class="box">
      <p>This is the third box but the second box is now missing.</p>
      <p>(via VISIBILITY: NONE)</p>
      <p>See how the space is still there?</p>
    </div> 
  </div>
  
</div>


            
          
!

CSS

            
              * {
  box-sizing: border-box;
  margin:0;
  padding:0;
}

h1, p {
  text-align:center;
  padding: 0 5px;
}

.page {
  max-width:75%;
  margin:0 auto;
}

.wrapper {
  width:240px;
  float:left;
  margin:10px;
  background:lightblue;
}

.box {
  width:240px;
  background:lightgrey;
  border:1px solid grey;
  text-align:center;
}

.display {
  display:none;
}

.visible {
  visibility:hidden;
}
  
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................