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

Question

我有一个扩展列表，最初只显示标题，但如果单击它，它会显示说明。我觉得该列表需要某种图像来帮助说明它需要单击以显示更多内容。话虽如此，我添加了一个加号----如果不同的图标更适合这种情况，请发表评论----。

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

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

我的代码是：

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

Answer 1

像下面这样在图像中正确填充，并在滑动时分别使用减号 (-) 和加号 (+)。

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

jsfiddle link chick here

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

Adding padding between an image and text

html

css

icons

image

padding