Oddělení položek od sebe

Dobrý den,
mohl bych Vás požádat prosím o radu?
Chci oddělit tyhle položky o vzdalenost cca 30px mezi sebou


Ale kdyz jsem zkousel padding, tak to dopadlo... řekněme, ne moc dobře.
Můžete mi poradit alternativní řešení? Popř. jak to udělat aby to fungovalo?
Chtěl bych docílit tohodle:


.hlavicka ul
{
padding: 0px;
margin: 0px;
}

.hlavicka ul li
{
float: left;
background-image: url('Images/mini_btn_31_22.png');
background-repeat: no-repeat;
width: 31px;
height: 22px;
padding: 0px;
margin: 0px;
}

.hlavicka ul li a
{
width: 31px;
height: 22px;
}

.hlavicka ul li a img
{
padding-top: 5px;
padding-left: 7px;
border-style: none;
}

<ul>
<li><a href="#"><img src="Images/mapa_webu_18_11.png"></a></li>
<li><a href="#"><img src="Images/domovskou_17_11.png"></a></li>
<li><a href="#"><img src="Images/kontakt_17_11.png"></a></li>
</ul>