内联块元素和块元素之间的空间

Question

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

<div id="asd"></div><div id="psd"></div>

http://jsfiddle.net/9thpuvwa/

Now, if the first div (asd) has some text in it, the space is gone; WHAT?

<div id="asd">a</div><div id="psd"></div>

http://jsfiddle.net/kadb1d3s/

(I'm trying to understand my prev question )

CSS

#asd {
  background-color: blue;
  display: inline-block;
  width: 200px;
  height: 200px;
}

#psd {
  background-color: red;
  width: 200px;   
  height: 200px;
}

The question: Where that space is coming from?

Answer 1

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 .

Answer 2

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 , or top , …) to it, and the space will be gone: http://jsfiddle.net/9thpuvwa/2/