显示全高的Html精灵

我有一个div，我有一个加号图标来扩展视图。当用户将鼠标悬停在上方时，图标将移到绿色版本

我现在添加了一行额外的文本，但现在显示了完整的图标。我不知道如何设置高度，只允许图标的第一部分显示

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

---

这里有两个选项：

1） 您可以更改精灵，使每个图像之间有一个间隙（不是很好）

2） 在

.roomtitle

div中添加一个span，并将精灵添加到其中。（这是我通常采用的方法）

---

将精灵放在链接中而不是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; 
}

---

工作演示：

这将与他拥有的相同，因为a标签将占据分区高度的100%。@locrizak-链接如何可能占据分区高度的100%？对不起，我没有看到高度。第二行的样式仍然有点复杂tickier@locrizak-即使没有高度，连杆仍无法填充容器。它是一个内联元素。高度需要使链接更大以容纳图像，而不是更小。

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

.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; 
}