html - メニューの画像のパディングではなく、テキストのパディングを変更する

Question

スプライト メニューがあり、パディングを修正したいです。パッドを追加すると、テキストだけでなく画像も移動します...

#categories{width:1042px;height:170px;margin:15px 0px 0px 0px;}
#categorieMenu{background:url(http://hmimexico.com/categories.jpg) no-repeat;width:1042px;height:170px;margin:0;padding:0;background-size:100% 200%;}
#categorieMenu li,#categorieMenu a{height:170px;display:block;color:#000000; text-decoration:none;}
#categorieMenu li{ 
    float:left;   
    list-style:none;    
    display:inline; 
    text-indent:5px;        
    line-height:95%;    
    font-size: 25px;    
    color: #000;
    font: normal 25px "DroidSansBold", Calibri, sans-serif;
    /*how to add correct pad to adjust text as wanted image?*/
    }
#categorie_1{width:174px;}
#categorie_2{width:175px;}
#categorie_3{width:174px;}
#categorie_4{width:175px;}
#categorie_5{width:174px;}
#categorie_6{width:170px;}
#categorie_1 a:hover{background:url(http://hmimexico.com/categories.jpg) 0px -170px no-repeat;}
#categorie_2 a:hover{background:url(http://hmimexico.com/categories.jpg) -174px -170px no-repeat;}
#categorie_3 a:hover{background:url(http://hmimexico.com/categories.jpg) -349px -170px no-repeat;}
#categorie_4 a:hover{background:url(http://hmimexico.com/categories.jpg) -523px -170px no-repeat;}
#categorie_5 a:hover{background:url(http://hmimexico.com/categories.jpg) -698px -170px no-repeat;}
#categorie_6 a:hover{background:url(http://hmimexico.com/categories.jpg) -872px -170px no-repeat;}

次のようなものを取得したい：

ここにフィドルがあります

Answer 1

リスト項目タグ内に含まれるテキストのみをパディングする場合は、次のように選択できます。

#categorieMenu a {
    padding: 5px 5px 5px 5px;
}

画像のパディングに影響を与えることなく、必要に応じてパディングを調整できます。

Answer 2

li 内のアンカーのパディングを移動します

#categorieMenu a{
    padding: 20px;  

}