Unwanted spacing below image - html

Question

I'm trying to create a fixed-position footer at the bottom of my page. but there's an issue with spacing below the image and the bottom of the viewpoint that is unwanted:
Base Image:
The Issue:
The padding below the image is unwanted.
HTML:
<div id="containerBarKonge">
<ul>
<li><img src="./kongelogo.png" /></li>
</ul>
</div>
CSS:
#containerBarKonge {
position: fixed;
bottom: 0px;
width: 100%;
z-index:9999;
padding: 0px;
margin: 0px;
}
#containerBarKonge > ul {
position: relative;
list-style-type: none;
padding: 0px;
padding-left: 2px;
margin: 0px 20px;
min-width: 1053px;
background-color: #900;
}
#containerBarKonge > ul * {
padding: 0px;
margin: 0px;
}

Answer 1

Try setting the vertical align to bottom on the image:
#containerBarKonge img { vertical-align: bottom; }

Answer 2

The issue comes from the image having a default property of "display: inline;" - which is the equivalent to saying "have this image run along like text."
Images should rarely be employed as inline containers. Instead, an image should be defined as either display: block or inline-block. This gives you much precise control over your iamges versus - just align this to the top or bottom. What if you want the image 1px from the bottom? With vertical-align you can not.
So the solution is to do the following:
#containerBarKonge > ul li {
display: block;
height: 20px; /* or however tall it is */
}
#containerBarKong > ul li img {
display: inline-block;
/* Assuming it is 18px tall and you want it at the bottom: 20 - 18 = 2px */
margin: 2px 0 0 0;
}
there you go. You have PRECISe control of the positioning of the image while it retains its ability to run along like text.