title: Extra space when using overflow:hidden in inline-block list
body: <p>Refering to this : <a href="http://jsfiddle.net/CZk8L/4/" rel="noreferrer">http://jsfiddle.net/CZk8L/4/</a></p>
  
  <p>Can anybody explain to me why the <code>overflow:hidden</code> style generates this extra space at the bottom of the first <code>li</code> ?</p>
  
  <p>This is driving me crazy for hours.</p>
  
  <p>The fact is I need the <code>position:relative; overflow:hidden</code> on my first <code>li</code> because of the <code>form</code> that I want to hide and move inside it (to follow the cursor). </p>
  
  <p>I tried to set some <code>height</code>or <code>max-height</code> on each element, but it did not work.
  I also tried some <code>line-height</code> </p>
  
  <p>A solution to re-align both <code>li</code> could be to add the same <code>position:relative; overflow:hidden</code> on the second <code>li</code>, but it still be the extra space under them and I would like to understand the root cause.</p>
  
  <p>Thanks for your help!</p>