html - 画像付きブロック内テキスト表示- CSS

Question

以下のようなページがあります。

<style type="text/css">
#test a{
  display: block;
  width: 150px;
  height: 50px;
  background-color: #CCCCCC;
}
</style>

<div id="test">
    <a>text text text<img src="image.jpg"></a>
</div>

私は次のような結果を得ています。

しかし、私は次のようなものが欲しいです。

ここにフィドルがあります

これを修正する方法を知っている人はいますか？

Answer 1

vertical-align:top画像に追加できます

#test img{vertical-align:top;}

更新されたフィドル

Answer 2

こんにちは、定義できます#test img {vertical-align:top;}

このように

CSS

#test a{
  display: block;
  width: 150px;
  height: 50px;
  background-color: #CCCCCC;
}

#test img{vertical-align:top;}

HTML

<div id="test">
    <a>text text text<img src="http://i.imgur.com/VlyB1.jpg"></a>
</div>

ライブデモhttp://jsfiddle.net/rohitazad/nPSBL/2/ </p>

Answer 3

CSSに追加してみてください：

#test a {
    vertical-align: top;
}