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”等字符在线下方）。

vertical-align的{{1}}似乎解决了这个问题：

top

JSFiddle demo

Answer 2

那个空间来自哪里？

从对齐的inline-block元素到“行”的baseline，它会显示在。

向其添加vertical-align:bottom（或text-bottom，或middle或top，...），空间将消失：http://jsfiddle.net/9thpuvwa/2/

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

2 个答案: