css - このjsFiddleの例でCSSの高さがギャップを作成するのはなぜですか？

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>とは両方とも<div>インライン要素であるため、ベースラインに揃えられます。

の場合、<div>テキストがないため、ベースがベースラインになります。

の場合<p>、そのベースは垂直方向に中央揃えされたテキストのベースラインになります。

vertical-alignデフォルトの配置を上書きするために適用するさまざまな方法があります。

Answer 3

多分これは問題を解決することができます：

p {
   vertical-align:top;
}