Как добавить дополнение к меню 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.