title: How remove vertical spacing between li css
body: <p>I have this html code and style "this is just an example":</p>
  
  <pre><code>&lt;div id="mn" style="margin-top:200px;"&gt;
                  &lt;div class="first"&gt;1&lt;/div&gt;
                  &lt;div class="second"&gt;2&lt;/div&gt;
                  &lt;div class="third"&gt;3&lt;/div&gt;
                  &lt;div class="fourth"&gt;4&lt;/div&gt;
              &lt;/div&gt;
  
  &lt;style type="text/css"&gt;
          #mn, #mn div { display:inline-block; vertical-align:middle; }
          #mn div { width:350px; margin:5px; /* float:left Comment */ }
          div.first { height:5px; background-color:Red; }
          div.second { height:120px; background-color:#999 }
          div.third { height:50px; background-color:Yellow }
          div.fourth { height:180px; background-color:#ccc }
      &lt;/style&gt;
  </code></pre>
  
  <p>The problem is, the element on left "the yellow and red ones" have a big space or bottom margin between these.
  I need delete this big margin or spacing and use just 5px in all element.</p>
  
  <p>I created a script with jquery that take the List and move them to a divs, something like that:</p>
  
  <pre><code>&lt;div id="mn_left"&gt;&lt;/div&gt;
              &lt;div id="mn_right"&gt;&lt;/div&gt;
              &lt;div id="mn" style="margin-top:200px;"&gt;
                  &lt;div class="first"&gt;1&lt;/div&gt;
                  &lt;div class="second"&gt;2&lt;/div&gt;
                  &lt;div class="third"&gt;3&lt;/div&gt;
                  &lt;div class="fourth"&gt;4&lt;/div&gt;
              &lt;/div&gt;
  
  $(document).ready(function () {            
              $("div", "#mn").each(function (e, value) {
                  if ($("#mn_left").height() &lt;= $("#mn_right").height()) {
                      $("#mn_left").append(value.outerHTML);
                  }
                  else {
                      $("#mn_right").append(value.outerHTML);
                  }
              });
          });
  </code></pre>
  
  <p>The script works fine, but I want to do it without scripts.</p>
  
  <p><strong>Edit...</strong>
  I mistook, I changed the li by divs... But it's exactly the same. The Html Looks Like that:</p>
  
  <p><a href="http://postimg.org/image/dh6dwdjc1/" rel="nofollow">http://postimg.org/image/dh6dwdjc1/</a></p>
  
  <p>What I really want is this</p>
  
  <p><a href="http://postimg.org/image/otnkrwhep/" rel="nofollow">http://postimg.org/image/otnkrwhep/</a></p>