ギャップ - XHTML/CSS

Question

IはXTMLで作成したテーブルを有し、そしてIは、例えば、表のセル内の2つのラインを持っている：私のと同じ細胞で

Firstname 
Surname 

右の画像を配置するのが好きです。

Firstname 

Surname 

しばしば画像は第二のラインの下に配置されている：私は<img> ようにそれを挿入すると、私はこのような二行の間のギャップを得ます。なぜそれが起こっているのですか、それを防ぐために何をすべきですか？

<td><strong>Name<br />Lastname<a href="google.com"><img src="images/1.gif" alt="img" /></a></strong></td> 

Answer 1

「white-space：nowrap;」というCSSスタイルを追加してみてください。 tdに。

Answer 2

画像のスタイルでは、画像に "float：right"を追加してみてください。

Answer 3

イメージ要素はインラインブロック要素です。つまり、インラインコンテンツの一部であることを意味します。イメージタグをそこに置くと、2行目のテキストの一部になります。 2行目は画像の高さを保持するのに十分高くなり、テキスト間にスペースができます。

ブロック要素にすることでインラインコンテンツからイメージを取り出すことができ、それをフローティングにして右に配置できます。

イメージタグをセルに挿入し、CSSスタイルfloat:right;を追加します。フローティングエレメントにすることで、自動的にブロックエレメントにします。