How To Move A DIV Element A Little Towards The Top

Problem :

I have an issue with the home-link image that I've coded for my hovering navigation bar. The URL to my blog is as follows : http://www.blankesque.com. I would ideally like the image to appear in-line with the tabs text that is beside it however no matter what I do I cant seem to move the "home" icon slightly up. I have tried to play about with padding and margin values but to no avail. I only need to move the image approximately 15px towards the top but I cant figure out how to go about it. I have included the html and css coding below :

#wctopdropcont { 
width:100%;
height:45px;
display:block;
padding: 5.5px 0 0 0;
z-index:100;
top:-2px;
left: 0px;
position:fixed;

background:#f8f8f8;
opacity: 0.9;
filter: alpha(opacity=90);
 }
</style>

<div id='wctopdropcont'>

<ul>
<li><a href='http://www.blankesque.com'><img alt='Home' height='30px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/520FDB25-EAD9-4BB0-B621-B1BFE3B558A9_zpsua6eoor2.gif' width='30px'/></a></li> 
</ul></div>

Solution :

Don't use any margins and stuff.

The problem is you have padding on your img.

set padding: 0; only to on the first li and it will be fine..

#wctopdropnav li:first-child { padding: 0; }