如何使用背景图像添加填充到ul / li菜单？

Question

我有以下菜单：

CSS：

            ul.menu {
                padding: 0;
                margin: 0;
                font-size: 16px;
            }

            ul.menu > li {
                display: block;
                width: 100%;
                margin: 0;
            }

            ul.menu > li:hover {
                color: red;
            }

            ul.menu > li a {
                display: block;
                background:transparent url("http://placehold.it/25x25") right center no-repeat;
                background-size: 15px 15px;
            }

            ul.menu > li > a:hover {
                background-color: #F7F7F7;
            }

HTML：

<div style="width: 200px; background-color: lightgrey;">
    <ul class="menu">
                        <li>
                            <a href="">Line 1</a>
                        </li>
                        <li>
                            <a href="">Line 2</a>
                        </li>
                        <li>
                            <a href="">Line 3</a>
                        </li>
                        <li>
                            <a href="">Line 4</a>
                        </li>
                    </ul>
</div>

JSFiddle：http://jsfiddle.net/8TzMc/

到目前为止一切都那么好，但我希望在li的左右两侧（大约10px）填充，我也希望li的高度稍大一些（这样它们之间有一些空间）文本行）。我尝试将此行添加到ul.menu > li CSS，但它以两种方式混淆了菜单：

1. 现在菜单项的顶部和底部之间存在无法点击的间隙
2. 背景图片搞砸了

JSFiddle：http://jsfiddle.net/HXrgq/

如何解决这个问题？

Answer 1

将padding添加到a元素而不是li元素。

ul.menu > li a { padding:10px;} 

例如

更新了Fiddle link

Answer 2

将填充添加到ul.menu > li a，而不是填补空白。

Answer 3

http://jsfiddle.net/HXrgq/1/

在li元素上，执行：

text-indent: 10px;
line-height: 1.5em;

似乎这就是你搜索的内容：缩进文字（我想这只是一行？）和line-height。