CodePen

HTML

            
              
<h1>DEMONSTRATING THE DIFFERENCE BETWEEN RELATIVE POSITIONING AND NEGATIVE MARGINS</h1>

<div class="page">
  
  <div class="wrapper">
    
    <div class="box">
      <p>This box is the specimen for comparison purposes.</p>
      <p>It is a grey box inside a blue box with a black border.</p>
    </div>
  </div>
  
  <div class="wrapper">
    <div class="box position">
      <p>This grey box is moved using relative positioning.</p>
      
      <p>The page remembers where it was and allocates that space as though the element was still there.</p>
      
      
    </div>
  </div>
  
  <div class="wrapper">
    <div class="box margin">
      <p>This grey box is moved using negative margin.</p>
      
      <p>See how the wrapper div has 'shrunk'?</p>
      
      &darr;  &darr;
    </div>
  </div>
  
</div>


            
          
!
via HTML Inspector

CSS

            
              * {
  box-sizing: border-box;
}

h1 {
  text-align:center;
}

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

.wrapper {
  border:5px solid black;
  float:left;
  margin:50px 25px 0 25px;;
  background:lightblue;
}

.box {
  width:250px;
  height:250px;
  background:lightgrey;
  border:1px solid grey;
  padding:10px;
  text-align:center;
}

.position {
  position:relative;
  top:-25px;
}

.margin {
  margin-top:-25px;
}
  
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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