html - 行内 block 元素和 block 元素之间的空间

Question

这两个 div 之间的空间是什么？我什至删除了 html 中的空格。

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

http://jsfiddle.net/9thpuvwa/

现在，如果第一个 div (asd) 中有一些文本，空格就消失了；什么？

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

http://jsfiddle.net/kadb1d3s/

(我试图理解 my prev question )

CSS

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

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

问题:空间从何而来？

Answer 1

这似乎是由垂直对齐引起的。在设置为 inline-block 的地方，默认情况下垂直对齐方式设置为 baseline，略微凸起(可能是为了考虑像 'y' 和 'g 这样的字符' 低于该线)。

top 的

vertical-align 似乎修复了它:

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

JSFiddle demo .