title: css inline-block vs float
body: <p>I'm doing some tests on <code>float</code> and <code>inline-block</code> and i've noticed there is a difference between them.</p>
  
  <p>As you can see from <a href="http://codepen.io/anon/pen/kwrtD" rel="noreferrer"><strong>THIS EXAMPLE</strong></a>, that if I use <code>display:inline-block</code> the divs have a little margin between them but if I use <code>float:left</code> it works as expected.</p>
  
  <p>Please note that i'm using Eric Meyer's Reset CSS v2.0.</p>
  
  <p>Is it because I'm doing something wrong or is this the way <code>inline-block</code> behaves (in that case it is not very reliable).</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;How padding/margin affect floats&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/reset.css"&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="wrap"&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS (without reset)</strong></p>
  
  <pre><code>#wrap{
    width: 600px;
      margin:auto;
  }
  
  .square{
      width: 200px;
      height: 200px;
      background: red;
      margin-bottom: 10px;
      /*display: inline-block;*/
    float:left;
  }
  </code></pre>