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

这两个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;
}

问题：空间来自哪里？

最佳答案

这似乎是由垂直对齐引起的。将其设置为inline-block时，默认情况下将垂直对齐方式设置为baseline，该高度会略微升高（可能考虑到字符y和g在线下的情况）。

vertical-align的top似乎可以解决此问题：

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

JSFiddle demo。

关于html - 内联块元素和块元素之间的空间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29165162/