title: CSS - remove vertical spacing
body: <p>I have a web page located at this URL <a href="http://www.hollox.net" rel="nofollow noreferrer">http://www.hollox.net</a>.</p>
  
  <p>This is a simple page to test for a customer that need a specific menu containing pictures overlapping.</p>
  
  <p>The positioning is relative.</p>
  
  <p>I have two series of 3 pictures that are overlapping:</p>
  
  <p><img src="https://i.stack.imgur.com/MzD49.png" alt="enter image description here">
  <img src="https://i.stack.imgur.com/VzJO6.png" alt="enter image description here"></p>
  
  <p>Is there a CSS tag that will remove space between the two series of div containers or do I have to manipulate the top property?</p>
  
  <p><img src="https://i.stack.imgur.com/txVvL.png" alt="white space"></p>
  
  <p>Here the source code:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;test pour Patrick&lt;/title&gt;
          &lt;style type="text/css"&gt;
  
              .container
              {
                  width: 800px;
                  height: 400px;
                  border: solid 5px yellow;
                  text-align: center;
                  overflow: hidden;
              }
              .table
              {
                  position:relative;
                  display: inline-table;
                  width: 310px;
              }
  
              .row
              {
                  position:relative;
                  display: table-row;
              }
  
              .cell
              {
                  position:relative;
                  width: 100px;
                  height: 100px;
                  border: solid 1px black;
                  display: table-cell;
              }
  
              .p
              {
                  background-color: Gray;
                  position:relative;
                  float: left;
                  clear: none;
                  z-index: 1;
              }
  
              .x
              {
                  background-color: Blue;
                  position:relative;
                  float: left;
                  clear: none;
                  z-index: 2;
                  /* 100px x 3 = 300px */
                  /* hardcoded value */
                  top: -80px;
              }
  
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="container"&gt;
              &lt;div class="table"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="cell p"&gt;&lt;img src="./images/p.png" /&gt;&lt;/div&gt;
                      &lt;div class="cell p"&gt;&lt;img src="./images/p.png" /&gt;&lt;/div&gt;
                      &lt;div class="cell p"&gt;&lt;img src="./images/p.png" /&gt;&lt;/div&gt;
                      &lt;div class="cell x"&gt;&lt;img src="./images/x.png" /&gt;&lt;/div&gt;
                      &lt;div class="cell x"&gt;&lt;img src="./images/x.png" /&gt;&lt;/div&gt;
                      &lt;div class="cell x"&gt;&lt;img src="./images/x.png" /&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="cell p"&gt;A&lt;img src="./images/p.png" /&gt;&lt;/div&gt;
                      &lt;div class="cell p"&gt;B&lt;img src="./images/p.png" /&gt;&lt;/div&gt;
                      &lt;div class="cell p"&gt;C&lt;img src="./images/p.png" /&gt;&lt;/div&gt;
                      &lt;div class="cell x"&gt;1&lt;img src="./images/x.png" /&gt;&lt;/div&gt;
                      &lt;div class="cell x"&gt;2&lt;img src="./images/x.png" /&gt;&lt;/div&gt;
                      &lt;div class="cell x"&gt;3&lt;img src="./images/x.png" /&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thank you,
  Have a great day!
  Sébastien</p>