css - 为什么 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来覆盖默认对齐方式。