为什么CSS高度会在这个jsFiddle示例中产生间隙？

Question

看到这个jsFiddle ......

http://jsfiddle.net/M4FAr/

CSS：

a {display:inline-block;background:gold}
a > * {display:inline-block;margin:0}
p {width:auto;line-height:30px;background:yellowgreen}
div {width:30px;height:30px;background:orangered}​

HTML：

<a>
    <p>left</p>
    <div></div>
</a>​

现在，为什么将height:30px设置为右边的div会在左侧p之上创建一个间隙？我该如何摆脱它？

我只希望容器a高30像素，而不是更多。另外，我希望它的孩子排队。

Answer 1

一个简单的a > * {float:left}解决了我的问题......

a {display:inline-block;background:gold}
a > * {margin:0;float:left}
p {line-height:30px;background:yellowgreen}
div {width:30px;height:30px;background:orangered}​

Answer 2

也许这可以解决问题：

p {
   vertical-align:top;
}

Answer 3

因为<p>和<div>都是内嵌元素，所以它们与基线对齐。

对于<div>，它没有文字，因此它的基础是它的基线。

对于<p>，其基数将是垂直居中文字的基线。

有多种方法可以应用vertical-align来覆盖默认对齐方式。