Html 在图像和文本之间添加填充

我有一个扩展列表，最初只显示标题，但如果单击，它会显示描述。我觉得列表需要某种图像来帮助说明它需要点击来显示更多。说到这里，我加了一个加号——请评论一下，如果换一个图标对这种情况更好的话

我觉得标题离加号太近了，那么我如何在加号和标题之间添加填充？我已经为标题添加了填充，所以我不确定该怎么做

这可以在我的网站上看到：

我的代码是：

.service_wrapper {
    border: 1px solid black;
    margin: 15px;
    width: 20%;
}
.service_list {
    margin-left: 20%;
}   
.service_title {
    padding: 15px 12px;
    margin: 0;
    font-weight: bold;
    font-size: 1em;
}
.service_title:hover {
    background-color: gray;
    color: blue;
    cursor: pointer;
}
.service_description { 
    display: none;
    padding: 8px 14px;
    width: 100%;
    margin-top: 10px;
    font-size: .9em;
}

<div class="service_list">
    <div class="service_wrapper">
         <div class="service_title"><img src="icons/plusSymbol.png" alt="Service" style="width:10px;height:10px;">Floors</div>
    <div class="service_description">The best floors!</div>
</div>

.service\u包装器{
边框：1px纯黑；
利润率：15px；
宽度：20%；
}
.服务清单{
左缘：20%；
}   
.服务名称{
填充：15px 12px；
保证金：0；
字体大小：粗体；
字号：1em；
}
.服务名称：悬停{
背景颜色：灰色；
颜色：蓝色；
光标：指针；
}
.service_description{
显示：无；
填充：8px 14px；
宽度：100%；
边缘顶部：10px；
字体大小：.9em；
}
地板
最好的楼层！

如下图所示，在图像中正确填充，并在向下滑动时使用减号（-）和加号（+）

.service_title img {
padding-right:10px;
}

---

jshiddle link

那么你是说你认为我应该在那里用减号而不是加号？这很有效。非常感谢你！另一个图标会更好吗？不，加号是可以的，但当向下滑动时，使其成为减号。有意义当图像向下滑动时，如何更改图像？能否提供两个图像（加号/减号）链接？请评论是否可以使用更好的图标。