フルハイトを表示するHtmlスプライト

Question

私は表示を拡大するプラスアイコンを持っているdivがあります。ユーザーが移動すると、アイコンは緑のバージョンに移動します。

追加の行を追加していますが、今度は完全なアイコンが表示されます。私は高さをどのように設定して、アイコンの拳部分のみを表示させるかはわかりません。

<div class="span-5 roomtitle"> 
    <a href="#">Classic Double Room</a> 
    <br>Sleeps: 2 
</div> 

CSS：

.roomtitle { 
      background: url("../images/icons/icon_add.gif") no-repeat scroll 0 0 transparent; 
      color: #990000; 
      line-height: 14px; 
      padding-left: 25px; 
      } 

Answer 1

代わりにdiv要素のリンクでスプライトを置く：

.roomtitle { 
    color: #990000; 
    line-height: 14px; 
} 
.roomtitle > a { 
    display: inline-block; 
    height: 14px; 
    background: url("../images/icons/icon_add.gif") no-repeat scroll 0 0 transparent; 
    padding-left: 25px; 
} 

の作業のデモ：http://jsfiddle.net/gilly3/U285K/

Answer 2

あなたはここに2つのオプションがあります。

1）各画像挟んギャップ（非常に良いではない）

があるようにあなたがスプライトを変更することができます

2）.roomtitle div内にスパンを追加し、そのスプライトを追加します。 （これは私が通常かかりますapprochです）

.roomtitle{ 
    width:25px; 
    height:25px; 
    background:url("../images/icons/icon_add.gif") no-repeat scroll 0 0 transparent; 
    float:left; 
    display:block; 
}