space between an inline-block element and a block element

Question

What is that space between these two divs? I even removed the white space in html.

Answer 1

Where that space is coming from?

From the inline-block element being aligned to the baseline of the “line” it is displayed on.

Add vertical-align:bottom (or text-bottom, or middle, ortop, …) to it, and the space will be gone: http://jsfiddle.net/9thpuvwa/2/

Answer 2

This appears to be caused by the vertical alignment. Where it's set to inline-block, by default the vertical alignment is set to baseline, which is slightly higher raised (probably to account for characters like 'y' and 'g' which dip below the line).

vertical-align of top seems to fix it:

#asd {
  ...
  vertical-align: top;
}

JSFiddle demo.