title: Make two divs touch without minus CSS properties
body: <p>I am creating a set of "step" divs to show progress through a page and I want these two divs to sit flush against each other but they have a couple pixels between them. I thought <code>margin</code> and <code>padding</code> 0px would of fixed it but it does nothing.</p>
  
  <p>I would like to achieve this without adding minus properties to the CSS</p>
  
  <p><a href="http://jsfiddle.net/aLs2b/" rel="nofollow">EXAMPLE</a></p>
  
  <p>CSS:</p>
  
  <pre><code>.step {
      width: 20px;
      height: 20px;
      background: white;
      border: 1px red solid;
      display:inline-block;
      padding:0px;
      margin:0px;
  }
  
  .line {
      height:1px;
      width:20px;
      background:#717171;
      border-bottom:0px solid #313030;
      display:inline-block;
      padding:0px;
      margin:0px;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="step"&gt;&lt;/div&gt;
  &lt;div class="line"&gt;&lt;/div&gt;
  </code></pre>