title: CSS inline-block margin bottom issue
body: <p>I got a problem with css inline-block, whenever i put inline-block for display property it's giving me some whitespace about 1px how to fix it ?</p>
  
  <p>word-spacing 0px and letter-spacing 1px is not a solution for margin-bottom</p>
  
  <p>my html files.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div class="myTab"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;1.tab&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;2.tab&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;3.tab&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class="myContent"&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium suscipit alias temporibus officiis inventore cum placeat pariatur beatae sapiente, sed rerum iste corrupti maxime corporis atque omnis. Totam, necessitatibus, consectetur.&lt;/p&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas consequatur, id soluta dolorum delectus tempora quod atque, nemo, beatae culpa perferendis placeat earum! Recusandae eos, maxime ipsa, vero vitae molestias soluta iste corrupti expedita sit dicta numquam, nihil veritatis ea odit molestiae qui minima! Esse expedita ipsum dolore inventore ex!&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="myContent"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, soluta, pariatur! Ullam at non animi sapiente, quas temporibus, modi esse quae ut incidunt autem. Totam sint autem quibusdam obcaecati dolorum.&lt;/div&gt;
  
          &lt;div class="myContent"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit impedit autem, sunt accusantium ducimus error obcaecati iste. Sapiente, asperiores libero nostrum ratione dolore. Autem inventore, facere nobis molestiae impedit, debitis!&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;!-- js files--&gt;
  &lt;script src="jquery.js"&gt;&lt;/script&gt;
  &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;!--/ js files--&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and my css files.</p>
  
  <pre><code>* {
      padding: 0;
      margin: 0;
      list-style-type: none;
  }
  .myTab{
      width:700px;
      margin:100px auto;
  }
  .myTab ul {
      background: #15232d;
      height:40px;
      overflow:hidden;
      display:inline-block;
  }
  .myTab ul:after {
      content:"";
      display:table;
      clear:both;
  }
  .myTab ul li {
      float: left;
      margin: 0;
      padding: 0;
  }
  .myTab ul li a {
      display: block;
      text-decoration: none;
      color:#fff;
      font:bold 12px tahoma;
      padding:0 20px;
      line-height: 41px;
  }
  .myTab ul li a:hover{
      background: #2f4758;
  
  }
  .myContent{
      color:#fff;
      background: #193549;
      font:12px/22px sans-serif;
      color:#e6e6e6;
      padding:12px;
  }
  .myContent p {
      margin-bottom:10px;
  }
  </code></pre>