やや大きすぎるインライン画像（例：スマイリー）が、テキストブロックの行の高さに影響を与えないようにすることはできますか？

Question

問題は、テキストのブロックがあり、テキストと一列に並びたいと思う画像が少し大きすぎる場合です。たとえば、スマイリーです。段落の行の行の高さが増加し、テキストのブロックが醜いものになります。

私は実際にはすでに解決策を考え出していますが、それは面倒です。私はそれが好きではありません...相対位置のdivにスマイリーをラップして、私は後になっている：

.holder{display:inline-block;position:relative;width:16px} 
.holder img{position:absolute;top:-16px} 

<span class="holder"><img src="/smiley.gif" height="16" width="16"></span> 

しかし、それは余分なマークアップを追加します。私は、オーバーフロー/垂直整列/フロート/ディスプレイなどのいくつかのアプリケーションを欠けているのだろうか純粋 CSSソリューション（なしジャバスクリプト！）

- 余分なHTML要素を追加することなく、これを達成する方法はありますか？

多くの感謝！

Answer 1

所望の画像の位置に応じて、あなたはピクセル単位で固定された行の高さを持っているかどうか、あなたの行の高さに等しく、設定あなたのイメージの最大の高さを設定することができます画像上にvertical-align: bottomがあるので、あなたのラインに正確に収まります。

たとえば、fiddleを参照してください。

p { 
    line-height: 18px; 
} 

p img { 
    max-height: 18px; 
    vertical-align: bottom; 
} 

<p>Some text <img src="/smiley.gif"> more text.</p> 

Answer 2

イメージをDIVのバックグラウンドとして設定し、DIVの固定サイズを指定します。

<div class="smiley"></div> 

CSS：

.smiley { 
    float:right; <-- or inline-block if you want. 
    background-image:url(../smiley.gif); 
    height:20px; 
    width:20px; 
}